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.
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.
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.
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.
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.
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.
Choose the unit of measure you'd like to use for defining the Slider Padding above.
This is the distance between slides within the slider.
Choose the unit of measure you'd like to use for defining the Gap distance above.
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.
Foundry's Slider tool provides you multiple ways to handle the height of your slider and its contents.
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.
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.
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.
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.
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.
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.
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.
When enabled the slider will auto advance through your slides. This setting also ties in with the Pause Duration and Pause on Hover settings.
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.
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.
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.
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.
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.
Here you can choose the unit of nmeasure that is used in determining the offset distance.
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.
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.
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.
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.
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.
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.
Here you can choose the unit of nmeasure that is used in determining the offset distance.
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.
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.
Here you can adjust the size of the pagination dots.
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.
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.
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.
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.
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.
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.
This field allows you to replace the default HTML Comment with your own text.
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.
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.
Here you can optionally add a Retina Image, in addition to the required normal Image above, for high DPI displays.
A Retina image is an image that is created specifically for Retina display, or high DPI displays, such as those found on most Mac computers and iPhones. In Retina Displays, you get double the pixels in the same amount of space as you would with a traditional display.
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.
When enabled you can add an ARIA label for accessibility to your Image.
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.
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.
Here you can optionally add a Retina Image, in addition to the required normal Image above, for high DPI displays.
A Retina image is an image that is created specifically for Retina display, or high DPI displays, such as those found on most Mac computers and iPhones. In Retina Displays, you get double the pixels in the same amount of space as you would with a traditional display.
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.
When enabled you can add an ARIA label for accessibility to your Image.
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.
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.
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.