Slider

Base Foundry stack

Stunning slideshows are super simple using Foundry’s Slider stack. The Slider stack is not only easy to use, but also highly customizable.

  • Use images, YouTube or Vimeo videos, or Hero slides
  • Use drag-and-drop to easily rearrage slides
  • Include navigation arrows for prev. and next slide
  • Allow keyboard navigation of slides
  • Allow touch navigation of slides
  • Allow slideshow to pause when clicked / hovered over
  • Choose to randomize slide order
  • Slider auto adjusts height to match slide
  • Opt to use Remote Images for your slides.
  • Use thumbnails or indicator dots for pagination
  • Customize look of indicator dots
  • Place indicator dots on or below slideshow
  • Use fun Expandot effect for indicator dots
  • Enable autoplaying of slideshow
  • Change pause and animation speeds
  • Add captions to individual images
  • Opt for a sub-title on hero slides

Example

  • Hero Slide

    This is a Hero Slide sub-head


Using Slider

Slider Navigation

Pagination
Choose which style of pagination you’d like for your slider: Navigation dots, thumbnails, or no pagination at all.

Dot Colors
You’re able to customize the normal and active color for the pagination dots when enabled.

Dot Placement
Choose whether you’d like to have the pagination dots located below the slider or on top of the slides themselves.

Dot Distance
Distance between the bottom of the slider and the pagination dots.

Arrows
Choose whether you’d like Previous and Next arrows to be used for navigating your slider.

Arrow Colors
Set the arrow icon color and background behind said arrows.

Nav Toggles
Allows you to decide on other optional methods for traversing your slider. You can enable keyboard navigation, which allows your visitor to move forwards and backwards through your slides with their arrow keys. You can also enable touch mode so that visitors can swipe forwards and backwards through your slider on touch enabled devices like the iPhone.

Slider Animation

Autoplay
Enable to have your slider auto advanced through your slideshow.

Pause
Set the amount of time you wish to have the slider pause before going on to the next slide. The larger the number the longer the slideshow will stay paused.

Speed
The speed at which you’d like the transition animation to occur. The smaller the number, the faster the animation.

Stop Slides On...
Choose whether you’d like the slideshow to pause itself when the visitor takes an action, like clicking on the slider navigation items, or have it pause when the slider is hovered over.

Slider Misc.

Randomize
When enabled your slide order gets randomized.

ExpandDot
A fun way to better indicate which slide your visitor is seeing when you’re using the dot navigation.

Advanced

Expand Slides in Edit Mode
Normally slides are presented in a smaller fashion in the Slider stack in Edit Mode, allowing you to rearrange them more easily and get a bigger overview of your whole slideshow. Use this feature to increase their size when you wish to work on their contents.

Pause Vimeo Videos on Advance
Enable this feature when using Vimeo video slides. This allows the video to auto pause when the slider advances.*

  • Please Note: YouTube videos do not currently have this option in the slider stack.

Slide Types

You can add various slide types to your slider, mixing and matching them even if you like. By clicking on the blue plus sign at the bottom of the Slider stack you can choose to add a "Image, Video or Hero" slide, a "Remote Image" slide or a "Content" slide.

If you add an "Image, Video or Hero" slide you can then choose what slide type it is in the slide settings, along with various other options.

Starting in Foundry v2 you can also a "Remote Image" slide that allows you to place an image into your slider that is a remote image on your server via a URL. v2

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set your Slider image(s).

The "Content" slide type allows you to drag-and-drop your own stacks into a slide drop zone.

  • Please Note: Not every stack will function properly in the "Content" slide type. Be sure to experiment to see which ones work best in this slide type.

Slide Settings

When using a "Image, Video or Hero" slide type you can adjust what media type you’re using as well as define other options. You can choose different options or media types for each slide. Below are the media types and the options that go with each of them:

Image

Image
Drag-and-drop your large image into this image well. The image will be responsive automatically.

Thumbnail
Provide a smaller version of your image here to act as a thumbnail if you’re using the Thumbnail pagination feature for your slider’s navigation.

Link
You may choose to set a link for your image. If so, add your link here.

Caption
Choose whether to add an overlay caption on your slide and also add the custom caption text.

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 may be blind) can interact with this element.

Vimeo

Vimeo ID
Insert your video’s ID number here. This ID number can be found on your Vimeo video URL. Below is a sample Vimeo URL. The ID is the last part of the URL after the final forward slash. In this case the ID would be: 131293625

https://vimeo.com/131293625

Thumbnail
Provide a smaller version of your image here to act as a thumbnail if you’re using the Thumbnail pagination feature for your slider’s navigation.

YouTube

YouTube ID
Insert your video’s ID here. This ID can be found on your YouTube video URL. YouTube’s IDs are a little more complex. Below is a sample YouTube URL. The ID is the last part of the URL after the "?v=". In this case the ID would be: 3hf30Sf-ddA

https://www.youtube.com/watch?v=3hf30Sf-ddA

Thumbnail
Provide a smaller version of your image here to act as a thumbnail if you’re using the Thumbnail pagination feature for your slider’s navigation.

Hero

Hero Image
Drag-and-drop your large hero image into this image well. The image will be responsive automatically.

Thumbnail
Provide a smaller version of your image here to act as a thumbnail if you’re using the Thumbnail pagination feature for your slider’s navigation.

Overlay
Choose a color to act as an overlay on top of your large image. This color’s opacity can be changed in the color picker as well to allow it to be translucent.

Display
Choose the size of the main slide title text. You’ve got 4 different display types to choose from.

Include Sub-Title
You can choose whether to include a sub-title on your Hero slide or not. If you include one you can insert your custom sub-title text here.

Hero Alignment
Opt to have your Hero slide’s content aligned to the left, right or center.

Width Type
Choose whether you wish to have the inner content’s width be a fixed, max-width, or whether it should be fluid and full-width.

Fixed Max-Width
Set the max-width for your inner content here.

Title & Sub-Title Colors
Use the color picker to choose how you wish to style the Title and Sub-Title on your Hero slide. You can even use the opacity slider to make the text translucent as well.

Insight
Uneven height

Mixed content can often have different heights. This is a good thing for a responsive website. That said, many people like their slides to be of equal height. To do so make sure you crop and size photos the same, as well as curate your text to be of equal height.