CMS Slider
Create a CMS powered native Webflow Slider component with a Webflow CMS Collection List.
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.
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.
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.
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.
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:
Working examples
See this solution working live in this Webflow project.
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
Is a natural history museum on the Upper West Side of Manhattan, New York City.
The Vatican Museums are the public museums of the Vatican City.
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
Combinations using CMS Slider:
You can combine this Attribute with others to create more complex solutions.
Developer documentation
Frequently Asked Questions
Everything you need to know about this attributes solution.
This can be done with instances, you would need to add a new list to the page for each slider.
This can easily be done using attributes, for your second slider onwards you need to add -x to the end of the value, "x" being a unique numeric identifier. Example for your second instance of the slider "fs-cmsslider-element = list-2" and "fs-cmsslider-element = slider-2" and so on.
This is the behaviour of webflow slider, we hope to have a solution soon.
Next time implement inside Webflow
