Slider

Stunning slideshows are super simple using Foundry’s Slider. The Slider tool is not only easy to use, but also highly customizable and allows for images and more to be used as your slide content.

Examples

Sneak Peek

This simple example shows off the Slider's smooth scrolling, responsive design. We've configured this instance to show a small sliver of the previous and next slides on the edges of the Slider itself and set it to Auto Play. With the vast array of settings in Slider you can really customize it to look and work just how you need it to.

Something has crept, or has been driven out of dark waters under the mountains.

Slider's can be a good way to show images or other content on a rotating basis. Use them sparingly though as they can cause "banner blindness." When the slider's contents look too much like a banner or an advertisement, your visitors may flat out ignore that content.

Settings

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Slides

Slides Per

Here you can adjust the number of slides shown on each "page" of slider. You can also choose the number of slides to move when the slider is advanced. This allows you to highly customize how your slider is displayed on the whole.

Slider Padding

Allows you to add padding to the left and right sides of the Slider itself. This can allow for you to style the slider so the visitor sees the next and / or previous slides poking out from the edge of the slider just a bit.

Padding Units

Choose the unit of measure you'd like to use for defining the Slider Padding above.

Gap

This is the distance between slides within the slider.

Padding Units

Choose the unit of measure you'd like to use for defining the Gap distance above.

Rounded Corners

Rounded Corners

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Height / Height Ratio

Height Type

Foundry's Slider tool provides you multiple ways to handle the height of your slider and its contents.

None

This type means simply that the slider's height is equal to the tallest slide in your slideshow. This is the most standard way a slider works. In this case you the developer create your content to be the height you wish it to be. This may mean scaling and cropping your images, video thumbnails, etc before adding them to RapidWeaver. This will be the most used and useful of the Height Types, thus why it is the default setting.

Fixed Height

Here you assign a fixed, set height for your slider at each of the 6 responsive breakpoints. Any content you have in your slider will be cropped off if it exceeds this height. The Slider tool offers various units for the measurement of these fixed heights for you to choose from.

Height Ratio

This option allows you to apply a width to height ratio for your slider. You're able to apply different ratios for each of the 6 responsive breakpoints. Again, content larger than this height will be cropped.

Cover Mode

When Cover Mode is enabled the image for your slide or video thumbnail will be scaled up and / or cropped to cover the entirety of the background of the slide. This helps fill in empty space that may be created by mis-matched ratios or heights. This is a more advanced feature and is not likely to often be needed. Videos themselves and Content slides are not affected by Cover Mode.

NOTE. Both Height Ratio mode and Cover Mode are suggested when using Video Slides.

Slide Transition

Type

Slider offers 3 different types: Slide, Loop and Fade. Each have their own uses, and some settings are geared toward specific slider types. Fade, being the most basic of the three types, does not interact with some of the slide style settings.

Duration

The amount of time it takes for the slider to transition from one slide to the next. The larger the number, the slower the transition.

Easing

Allows you to customize the way the transition animation takes place. We can adjust the way the slides ease in, ease out or both. This may seem like a minor tweak, and most user may leave the setting on Standard, but adjusting the easing type can give you a different look and feel for your sliders.

Auto Play

Auto Play

When enabled the slider will auto advance through your slides. This setting also ties in with the Pause Duration and Pause on Hover settings.

Pause Duration

This is the amount of time the slider will pause on each slide when Auto Play is enabled. The larger the value, the longer it will take to switch to the next slide in the Slider.

Pause Auto Play on Hover

When enabled the slider pauses the countdown of the Pause Duration. This allows the visitor to take in the contents of the slide by simply hovering their mouse cursor over the slide.

Reset Auto Play Progress on Hover

When you enable this setting the pause duration countdown will be reset when the visitor hovers over the slider. This means the countdown will start anew at the full Pause Duration value when the visitor's mouse cursor leaves the slide.

Controls

Controls

Choose which controls you'd like to make available to your visitors for going forward and back through your slides. You can enable / disable the navigation arrows, placed on each side of the slider, or the navigational dots.

Arrows

Arrow Offset

Allows you to adjust the distance of the arrow controls from the sides of the slider. You can use either positive or negaitve values here. This is a uniform value across all breakpoints. You can click the small + button above the Arrow Offset setting allowing you to adjust the offset value at each of the 6 responsive breakpoints.

Offest Units

Here you can choose the unit of nmeasure that is used in determining the offset distance.

Arrow Size

Used to adjust the size of the arrow button controls. You can adjust the height and width of the controls independent of one another. You can click the small + button above the Arrow Size setting allowing you to adjust the offset value at each of the 6 responsive breakpoints.

Arrow Icon

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the icon within the arrow controls. You're also provided an option to choose a custom one-off color as well.

Arrow Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the arrow controls. You're also provided an option to choose a custom one-off color as well.

Rounded Corners

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Shadow

Used to add a decorative shadow on this item. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Pagination Dots

Dots Offset

Allows you to adjust the distance of the pagination dots from the bottom of the slider. You can use either positive or negaitve values here. This is a uniform value across all breakpoints. You can click the small + button above the Dots Offset setting allowing you to adjust the offset value at each of the 6 responsive breakpoints.

Dots Units

Here you can choose the unit of nmeasure that is used in determining the offset distance.

Dots

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the normal, non-active pagination dots. You're also provided an option to choose a custom one-off color as well.

Active Dot

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the current, active pagination dot. You're also provided an option to choose a custom one-off color as well.

Size

Here you can adjust the size of the pagination dots.

Normal & Active Shape

To further customize the look of your pagination dots you can choose the shape of the normal and active pagination dots, independent of one another.

Video Play Button

Icon

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the icon found within the Video Play button indicator. You're also provided an option to choose a custom one-off color as well.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the Video Play button indicator. You're also provided an option to choose a custom one-off color as well.

Shadow

Used to add a decorative shadow on this item. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Overflow Control

Auto Overflow Control

This setting is used to set a parent Column's overflow property to Hidden to prevent the Slider from breaking the columns layout. This is on by default to help with placement inside of columnized layouts. If you are not using the Slider within a columnized layout you can disable this feature.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Items - Image

Image

Image

This drop zone is where you'll provide the main, required image for the Image tool. You can use the following file formats for this drop zone, as well as the Retina Image drop zone, below.

  • JPG
  • PNG
  • GIF
Retina Image

Here you can optionally add a Retina Image, in addition to the required normal Image above, for high DPI displays.

ALT Tag

Provides you a way to add an ALT Tag to your image. The ALT tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by screen reader software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

Add Accessibility Label

When enabled you can add an ARIA label for accessibility to your Image.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Items - Video

Video

Image

This drop zone is where you'll provide the main, required image for the Image tool. You can use the following file formats for this drop zone, as well as the Retina Image drop zone, below.

  • JPG
  • PNG
  • GIF
Retina Image

Here you can optionally add a Retina Image, in addition to the required normal Image above, for high DPI displays.

ALT Tag

Provides you a way to add an ALT Tag to your image. The ALT tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by screen reader software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

Add Accessibility Label

When enabled you can add an ARIA label for accessibility to your Image.

Video Slide Settings

Video Type

This setting allows you to choose which type of video you've like to include on your page, whether it be an embed from YouTube or Vimeo.

Unique ID

This is the ID of the video from YouTube or Vimeo that you wish to embed on this page. Note that this is not the URL for the video, but instead the ID that is created and provided by one of these two services.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.