How to add an attribute:

close icon
Hey! Give us some feedback here.
Components

CMS Slider

Create a CMS powered native Webflow Slider component with a Webflow CMS Collection List.

Get Started

71,629,376

loads per month

CMS Slider
Script
Documentation
Examples
FAQ
API
Tutorial
Cloneable
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Scroll horizontally to see documentation
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
LIST
I want this

Collection List

to be the dynamic content for the Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsslider-element
copy icon
Value
list
copy icon
Check live example here
This Collection List is the data source for the Slider component. Slides will be dynamically generated based on the items in this Collection list.

For example, if there are 10 items in this Collection, the Slider will generate 10 slides.

This List will automatically be removed from the page once its content is added to the Slider. It is only used to get the dynamic data. It is not for display purposes.
how to add cms slider list attribute
navigator arrow
SLIDER
I want this Webflow
slider icon

Slider

component to display the dynamic content
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsslider-element
copy icon
Value
slider
copy icon
This is the visible Slider component on the page.

Each Collection Item from the List will be added inside each Slide of the Slider.

Attributes preserves Slide stylings. Style your Slider's Slides and each Collection Item will be added inside a Slide.
how to add cms slider attribute
It will show like this:
cms slider example
navigator arrow
Option
RESET INTERACTIONS
I want to use interactions on the Slide Change
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsslider-resetix
copy icon
Value
true
copy icon
If you are using Webflow interactions on Slide Change and you want this Slide Change interaction to be applied to all generated CMS slides, apply this attribute to the implementation.

Warning: When using this attribute, all interactions that have an Initial State will be restored to it, use with caution to avoid unexpected UX behaviors.
Where?
Add to an element with fs-cmsslider-element = "slider"
navigator arrow
I want to have more than one instance of CMS Slider on the same page
See how it works
see webflow attributes
Optional
This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances
Second instance example
Third instance example
fs-cmsslider-element = "list"
fs-cmsslider-element = "list-2"
fs-cmsslider-element = "list-3"
fs-cmsslider-element = "slider"
fs-cmsslider-element = "slider-2"
fs-cmsslider-element = "slider-3"

Working examples

See this solution working live in this Webflow project.

Example
Slider with dynamic CMS content
Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

The Vatican Museums
Rome
/
Italy
The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Christ the Redeemer
Rio de Janeiro
/
Brazil
Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

Statue of Unity
Gujarat
/
India
Statue of Unity

Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.

The Grand Canyon
Arizona
/
United States
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

Copy and paste this example directly on Webflow
locked icon
Coming soon

Combinations using CMS Slider:

You can combine this Attribute with others to create more complex solutions.

CMS Slider
+
Custom Slider Dots

Create a slider with dynamic content and style the nav dots.

CMS Slider
+
Copy to Clipboard

Create a slider with dynamic content and Copy to Clipboard functionallity.

CMS Slider
+
Webflow's dynamic attributes

Populate a slider inside a CMS post with dynamic content.

CMS Slider
+
Custom Slider Dots
+
Mirror Click
+
Webflow's dynamic attributes
+
Disable Scrolling

Open a specific content in a CMS Slider with dynamic content inside a modal popup.

Developer documentation

Check the dev documentation
external link icon

Frequently Asked Questions

Everything you need to know about this attributes solution.

There is no current workaround for this, please use this attribute carefully as to not cause major issues with your page’s interactions

Next time implement inside Webflow

Use Finsweet Extension
external link icon
Attention, you're browsing the Attributes Legacy (v1) documentation

Adopt the NEW Finsweet Attributes!

This version of Attributes — named Attributes Legacy — is now outdated ¹. For new developments, we highly recommend transitioning to the latest Finsweet Attributes to benefit from enhanced features and support.²

¹ Attributes Legacy will remain operational for existing projects, but please note that we have ceased offering support for this version.
² The new version of Finsweet Attributes and Attributes Legacy are incompatible, they can't be used on the same page. 

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.