How to Create a Webflow Slider: Setup, CMS & Finsweet Guide (2026)

Webflow's native slider is one of those components that looks simple on the surface but has a lot of depth once you start using it for real projects. In this tutorial, I'll walk you through everything - from the basics of setting up your first slider to connecting it to CMS content so you can manage it from one place across your entire site.

I've used Webflow sliders in dozens of client projects. The static version is easy to set up in minutes. The CMS-powered version, using Finsweet Attributes, takes a bit more setup but gives you a level of flexibility that's hard to match without writing a lot of custom code.

How Webflow’s Slider Component Works

Before touching anything, it helps to understand what you're actually working with. A Webflow slider consists of four main elements:

• ‍Slider container: The outer wrapper that holds everything
• ‍Slider mask: Controls what's visible at any given time - this is what you resize for multi-slide views‍
• Slides: The individual content panels inside the mask‍
• Navigation elements: Arrows and pagination dots, both fully styleable

To add a slider, open the Add Elements panel (CMD+E), search for "Slider" and drag it onto your canvas. Webflow places the component with two default slides and arrow navigation already in place.

Slider Settings Worth Knowing

Once your slider is on the canvas, click the outer Slider element and open the Settings panel. Here's what each option actually does:

• Animation: Slide moves slides horizontally. Fade crossfades between them. For testimonial sliders, fade usually feels cleaner.
• Infinite loop: Keeps the slider cycling without stopping at the last slide. Almost always worth enabling.
• Autoplay: Auto-advances slides. Set a delay of at least 5000ms so users can actually read the content.
• Disable swipe: Turn this off for touch devices only if your slider has horizontal scroll conflicts. Otherwise leave it enabled.
• Arrows and dots: Both can be hidden individually from the Settings panel or styled from the Navigator.

Multi-Slide View and Responsive Adjustments

One of the most common slider setups is showing multiple slides at once - for example, 3 on desktop, 2 on tablet, 1 on mobile.

Here's how to do it:

1. Select the Slider Mask (not the outer Slider container)
2. Set its width to 33.33% on desktop for a 3-up layout
3. On tablet, change it to 50% - on mobile, 100%
4. Make sure overflow on the Slider container is set to hidden

The slides themselves fill the mask. This approach keeps everything inside native Webflow without custom code tricks.

Fix: Uniform Height for All Slides

If your slides contain content of different lengths - which is almost always the case with testimonials or cards - they'll render at different heights by default. This breaks the layout.

Fix it with two CSS rules added to your page's embed or global styles:

.w-slider-mask {

 display: flex;

 align-items: stretch;

}

.your-card-class {

 height: 100%;

}

Replace .your-card-class with whatever class you've given your slide content. This forces every slide to match the height of the tallest one.

Static vs. CMS Slider vs. Swiper.js - Which Should You Use?

Before going further, it's worth being completely clear about your options:

CMS Slider with Finsweet Attributes - Step by Step

This is the part most guides get wrong, so I created a full tutorial for it. Here's the correct setup for 2026.

Why Use a CMS-Powered Slider?

If you have a testimonial slider on multiple pages and a client changes their job title, you'd normally have to update every single slider manually. With a CMS-powered slider, you update it once in the CMS and it reflects everywhere instantly. The same logic applies to case study carousels, team member sliders, or any repeating content.

I recorded a full walkthrough of this exact setup - it's the most efficient way to follow along:

Step 1: Set Up Your CMS Collection

Create a new CMS Collection called "Testimonials" (or whatever fits your content). Add the fields you need:

• Name (plain text)
• Position & Company (plain text)
• Quote (plain text or rich text)
• Portrait image (image)
• Order (number) - for controlling slide sequence
• Tag (reference or multi-reference) - optional, for page-specific filtering

Add at least 3-4 entries so you can test the slider properly.

Step 2: Build Your Static Slider First

If you don't have a slider yet, build one with static content first using steps in the first part of this guide. Design your slide card exactly the way you want it to look - this becomes the template that Finsweet will populate with your CMS data.

Step 3: Add a CMS Collection List to the Page

Place a CMS Collection List anywhere on the page. It can be hidden or positioned off-screen - it just needs to exist in the DOM. Connect it to your Testimonials collection. Inside the list item, paste a copy of your testimonial card and connect each field to the corresponding CMS data (quote, name, image).

Step 4: Add the Finsweet Script

Add the following script to your Page Settings > Custom Code > Head (or site-wide if you use this slider across multiple pages):

<script defer src="https://cdn.finsweet.com/attributes/cms-slider-1.js"></script>

Using defer keeps the script from blocking your page load — important for Core Web Vitals.

Step 5: Add the Attributes

Two attributes tell Finsweet what's what:

• On the CMS Collection List: add attribute fs-cmsslider-element = list
• On the Slider element: add attribute fs-cmsslider-element = slider

Both must be on the same page. Publish and test - Finsweet pulls the CMS content into your slider automatically.

Step 6: Control Order and Filtering

To control slide order: Add a number field called "Order" to your CMS. Set values in steps of 5 (5, 10, 15…) so you can insert new items between existing ones without renumbering everything. In your Collection List settings, add a Sort rule by this field.

To filter by page: Add a multi-reference field linking testimonials to specific pages or categories. In your Collection List, use Webflow's native filter options to show only the testimonials tagged for that page. Each page then shows a different set of slides from the same CMS collection.

What's New in 2026

As of July 2026, Webflow's Component Slots now support Collection Lists and Sliders. This means you can build a reusable Slider component and drop a Collection List directly into a slot - making CMS slider setups even cleaner if you're working with a component-based design system. If you're starting a new project today, it's worth building your slider inside a Component from the start.