AttRibutes
List Slider
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Slider

Create Native Sliders with CMS Collection List in Webflow.

Watch a quick tutorial

List Slider • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

List

Add to Collectin List

fs-list-element
=
"
list
"

Slider

Add to Slider Element

fs-list-element
=
"
slider
"

Optional attributes

Reset interactions

Add to the Slider elemet

fs-list-resetix
=
"
true
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Add these required attributes to the elements

List

The Collection List to inject into the Slider
fs-list-element
=
"
list
"

This Collection List serves as the data source for the Slider component, dynamically generating slides based on the items in the list.

The List is automatically removed from the page after its content has been transferred to the Slider, as its purpose is solely to provide dynamic data and not for display.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
EXAMPLE

If the Collection shows 10 items, the Slider will create 10 corresponding slides.

IMPORTANT

You can apply the List Filter, List Load, and List Sort Solutions to this Collection List, allowing dynamic updates to the Slider element's content based on user interaction.

For example, clicking a Load More link immediately increases the number of slides. Similarly, activating a Filter or Sort will update and reorder the slides accordingly.

NOTE

In case you want to use non-CMS content, replicate the CMS structure using div blocks as follows:

Learn everything about using a non-CMS list with the List Solutions on How to use List Solutions on static lists.

Slider

The visible Slider
fs-list-element
=
"
slider
"

Apply this attribute to a Slider element on the page.

Every Collection Item from the List will be placed within a Slide of the Slider.

Add this attribute:
Name
fs-list-element
Copy
Value
slider
Copy
Add it to those type(s) of element(s):
Slider
NOTE

The List Slider Solution preserves the styling of the Slide element. By styling the Slider's Slide element, each Collection Item will be incorporated into a Slide, preserving the designed appearance.

For instance, if you add padding to the Slide element, all slides on the published site will have this padding.

NOTE

The Slider element can stay empty, with the two default slides. The number of slides is solely defined by the number of items in the Collection List.

You can also add placeholder content as you like, for Preview and layout purposes, but it will be not be shown on the published site.

NOTE

It's possible to use multiple Sliders per List.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Reset Interactions

For interactions on the Slide Change event
fs-list-resetix
=
"
true
"

When implementing Webflow interactions that trigger on Slide Change, and you wish these interactions to apply to all CMS-generated slides, include this attribute in your setup.

WARNING

Employing this attribute means all interactions with an Initial State will reset to that state. Use this feature carefully to prevent unintended user experience issues.

Add this attribute:
Name
fs-list-resetix
Copy
Value
true
Copy
Add it to any element with
fs-list-element = "slider"
script icon
Script tag
?
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-list-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-list-instance = "1"
fs-list-instance = "2"
fs-list-instance = "blog"
fs-list-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support

Build higher quality Sliders in less time using Finsweet Components

Create custom sliders without the mess

Check this Component