Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
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.
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 Slider comes with two slides by default. You can add more slides in a few different ways:
You can move through our slides in four ways:
You can also go to a specific slide using the slide menu in the slider settings.
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.
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.
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.
You can style and customize the slider element in any way you’d like. Here are a few common ways to customize 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.
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:
The font size will affect the size of the icon and the font color will affect the color.
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.
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:
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:
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.
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.)
Thanks for the feedback! This will help us improve our content.
Something went wrong while submitting the form. Please contact support@webflow.com
Oops! Something went wrong while submitting the form
Oops! Something went wrong while submitting the form