CMS Slider

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

Get Started

86,627,946

loads per month

Step #1

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

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.

LIST

I want this

Collection List

to be the dynamic content for the Slider

See how it works

Add this attribute

Description

Name

fs-cmsslider-element

Value

list

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.

SLIDER

I want this Webflow

Slider

component to display the dynamic content

See how it works

Add this attribute

Description

Name

fs-cmsslider-element

Value

slider

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.

It will show like this:

Option

RESET INTERACTIONS

I want to use interactions on the Slide Change

See how it works

Add this attribute

Description

Name

fs-cmsslider-resetix

Value

true

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"

I want to have more than one instance of CMS Slider on the same page

See how it works

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"