How do I add a slider in Webflow?

Add the slider and the slides you need

A slider is an inline slideshow. It is not a lightbox, which opens media in a full-screen modal. Drag a Slider onto the canvas from the Add panel. It takes the full width of the parent. Inside it are a mask with two slides, a left arrow, a right arrow, and the slide nav dots.

Add a slide in any of three ways. Select a slide, open Element settings, and click Add slide. Or right-click a slide and choose duplicate. Or copy and paste the slide. Move between slides with the arrows in Slider settings, the dots on the canvas, the Navigator, or the left and right arrow keys while the slider is selected.

Example: a homepage row should show three customer quotes. Start with the two default slides, add a third, and put one quote and one name in each slide. A container inside the slide keeps the text off the edges. You can also set a background image on the slide, with the size set to cover, and place the quote on top of it.

Set the height, the arrows, and the motion

The width follows the parent. The height is a style on the slider itself. Select the slider and set the height. If a slide uses a background image set to cover, that image follows the new height. Move the slider into a narrower parent when the slideshow should not span the page.

Arrow icons use font size for their size and font color for their color. Give the left arrow a class, set those two styles, and do the same for the right arrow. To use your own icon, delete the icon inside the arrow and drag an image in. You can hide the arrows or the dots by selecting them and setting display to none.

Slider settings control the motion:

• Animation type sets how a slide leaves and the next one arrives
• Easing and duration set the feel and the length of that change
• Swipe gestures can be turned off on touch screens when the timing should not depend on a swipe
• Autoplay sets how long the slider waits before the first change, and how many slides play before it stops
• The first and last slide arrows can hide the left arrow on the first slide and the right arrow on the last
• Slide nav sets spacing, shape, and inverse colors for the dots

Webflow's slider article says the dot color is not in that panel. It is set with CSS in an embed, on the class w-slider-dot, and on w-slider-dot with w-active for the current dot. Spacing and shape stay in Slider settings.

Show three cards, or one CMS item per slide

To show three slides at once, give every slide the same class. Set the width to 33.33% on desktop and 100% on mobile. Use a combo class when one slide needs a different background. This is a layout change on the slides you already have, not a second slider.

Webflow's slider article says a slider cannot build a slide for each Collection item on its own. Add a Collection list inside the first slide and connect it to the Collection. Turn Limit items on and set Show to 1. Duplicate the slide for each further item. On the second slide, set Skip to 1 so the list skips the first item and shows the second. On the third slide, set Skip to 2. Leave Skip empty on the first slide so it still shows the first item.

Sort and filters run before Skip. Skip only moves the start of that result. It does not pick an item by name. If the second slide still shows the first quote, Skip is empty on that list, or Show is high enough to include more than one item.

Check focus, then publish

Webflow's accessible elements article says a slider needs a visible focus style on the left arrow and the right arrow. Select the arrow, open the focused state, and add an outline a visitor can see. The same article says the dot needs a focus style in custom CSS. Keep a visible indicator on the focused state so keyboard users can tell which control is active.

Publish, then use the live page. Click both arrows, click a dot, and swipe on a phone if swipe is still on. If autoplay is on, wait and confirm it stops after the number of slides you set. Open a phone width too. A slider that fits the desktop parent can overflow when that parent is still wider than the screen. Narrow the parent on the smaller breakpoint and publish again.