This Webflow Dynamic CMS Slider using Vanilla JavaScript enables you to create a dynamic slider with the native Webflow Slider and Collections. You can use Data Attributes to deliver multiple sliders and further enhance them with mixed-content sliders that pull divs into the slider from anywhere on the page. A fuller explanation and an Add-on Script for numbering slides are available on the Slick Media website.
1. Add the 'Webflow Dynamic CMS Slider' script before the closing </body> tag in the page code as per this page.
2. Add instance(s) of Webflow Dynamic CMS Slider and wrap in a div and set data attribute Name: data-dynamic-slider Value: 1. If you are using one slider per page, then you can put the attribute directly on the 'Slider'.
3. Add instance(s) of Webflow Collections, with the Collection Items styled as you want them to appear in the slider and wrap in a div and set data attribute Name: data-dynamic-slider-collection Value: 1. If you are using one slider per page then you can put the attribute directly on the 'Collection Wrapper'.
4. If your collection(s) items pull from divs outside the slider container, set the Collection List style to display none in Style settings.
5. Publish
The current version is 5.1. Please keep the code credits as per the code.
data-dynamic-slider:
data-dynamic-slider-collection:
data-dynamic-slider-nav:
data-dynamic-slider-arrows:
data-dynamic-slider-div:
data-dynamic-slider-div-position:
The current version is 5.1. Please keep the code credits as per the code.