Slider

The slider is one of the simplest and most powerful components in the Webflow Designer. You can use the slider to present images, text, videos—you name it.

In this lessons we will cover five aspects of the slider.

• Anatomy of a slider
• Creating and switching slides
• Adding background images to slides
• Adding additional content to slides
• Configuring settings

Anatomy of a slider

When a Slider is added to the canvas you’ll notice that it takes up the full width of whatever parent element it’s dropped into.

Once the Slider is on the page we can see that the component has four children.

• The Mask - which contains the two  default slides
• The left and right arrow
• The slide navigation

Creating and switching slides

The Slider comes with two slides by default. You can add more slides in a few different ways:

• Select any slide element, go to Element Settings Panel (shortcut: D) and click + Add Slide
• Right click on a slide on the canvas and select duplicate
• Select the slide on the canvas or in the navigator and copy-paste to duplicate

You can move through our slides in four ways:

• Click on the arrows found in the Slider settings
• Click on the dots in the Slide Navigation directly on the canvas
• Clicking on the slide in the Navigator Panel
• With the slider selected, press the left and right arrows on your keyboard

You can also go to a specific slide using the slide menu in the slider settings.

Adding background images to slides

You can drag an image element into a slide. Or you can add a background image to the slide, so you can easily position extra content on top later.

1. Select a slide and create a class
2. Add a background image
3. Set the background image size to contain and the position of the background image to center.

Re-use the same class for other slides if you want to share similar styles. You can also add a different combo class for each slide and override the background image.

Adding additional content to slides

Slides, like div blocks or sections, can contain other components as well. If we drop our slider in the body, we can add a container in the slide and then drop a heading and a paragraph in the container.

Configuring settings

From the Settings Panel (D) there are many settings to control the behavior of the slider, which include:

Animation type - set how the slides will look as they move between slides.

Easing method - change the easing method for how the slides transition between slides.

Duration - dictates how long the slide should take to transition to another slide.

Swipe gestures - enable or disable swipe gestures on touch devices. Especially useful if the specific timing of the slide is important in your design.

Auto play- set how long it should take for the first slide to change (autoplay) and how many slides it should go through before the slider stops changing slides entirely.

First and last slide arrows - turn off the left arrow on the first slide and the right arrow on the last slide.

Slide nav controls - choose the spacing, shape, and inverse colors for the nav buttons.

Advanced customization

You can style and customize the slider element in any way you’d like. Here are a few common ways to customize the slider.

Resizing the slider

You can adjust the slider size by selecting the Slider, and setting a different height in the Styles Panel. Notice when you do this the background image resizes accordingly if it’s set to cover.

The above example changes the slider height to a pixel-unit height. You can also set the height based on the viewport height (vh). Learn more about different width & height units.

If you need to adjust the width you can move the slider to a larger or smaller parent element. In this example the slider is placed just like a section so it takes up the full width of the page.

Customizing arrow icons

By default the arrows used in the slider will be centered vertically, and look like white arrow icons. You can adjust the look of these icons by following these steps:

1. Select the left arrow and right arrow element
2. Give it a class
3. Edit the font size and font color styles in the Style Panel

The font size will affect the size of the icon and the font color will affect the color.

Replacing arrow icons

If you want custom arrow icons for your slider, you can simply delete the icon element inside the left arrow or right arrow elements. Then drag your own image into the left and right arrow elements.

To style the hover state on the left and right arrow elements with a custom image, you’ll have to transition between different opacity values.

Hiding slide elements

Any part of the slide can be hidden if you don’t want to use it in your design. Here’s how to do that:

1. Select the slide nav element or any other slider element
2. Set the display setting to none

Showing multiple slides at once (carousel)

You can also customize the slider element to be a carousel slider—showing multiple slides at once. Here’s how to make a slider that shows 3 slides at a time:

1. Add a slider
2. Give all slides the same class
3. Set the width on the class to 33.33%

If you need to edit the slides to differentiate them from one another (e.g. different background images), you can add a different combo class to each slide.

Populating a slider with collection items

At the moment, sliders can't be automatically populated with dynamic content. You can vote on this feature request on the Webflow Wishlist.

As a workaround, you can add a collection list to each slide. Then, limit the number of items shown for that list to only display one Collection item. 

Each slide will need it's own collection list. Once you create the first collection list, you can duplicate the slide. Then, just change the "start at" number of the collection list for each slide to the item corresponding to the slide number (e.g. slide 1, item 1 / slide 2, item 2.)