CMS Slider v1.0
Create a CMS powered custom Slider with a Webflow CMS Collection List.
Instructions
Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.
How to CMS Collection Slider in Webflow
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Div Block.
In this example the Div Block has been give the class slider_slider
Set the Collection List layout to Flex or Grid.
In this example we are using Flex.
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of the Collection item
Make sure the Collection List is nested inside the Div Block, slider_slider from Step 2
Style Collection Item and add Transitions
Add Webflow Transitions to the Collection Item to control the speed and easing of the slider.
In this example the Transition is a Transform: 1000ms with an Easing of ease
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Div Block, or Custom Element.
In this example the Div Block is give the class slider_prev .
Make sure the Div Block, slider_prev is nested inside the Div Block, slider_slider from Step 2
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Div Block or Custom Element.
In this example the Div Block is give the class slider_next .
Make sure the Div Block, slider_next is nested inside the Div Block, slider_slider from Step 2
Copy this Combo Class:
Paste the combo class into a style selector of slider_next .
Style your the combo classes.
eg. change the background colour.
Repeat for slider_prev .
Delete the combo class and publish
How to add active class to a CMS Collection Slider in Webflow
Copy this combo class:
Paste the combo class into a style selector of Collection Item and/or all it's children elements.
Style your the combo classes.
eg. change the width and give the width transition a time of 1500ms and Easing of ease
Delete the combo class and update the Transitions to include Width.
In this example the Width has a time of 500ms and Easing of ease.
Publish
How to Navigation to a CMS Collection Slider in Webflow
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Div Block or Custom Element.
In this example the Div Block is give the class slider_nav .
Make sure the Div Block, slider_nav is nested inside the Div Block, slider_slider from Step 2
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Div Block or Custom Element.
In this example the Div Block is give the class slider_dot .
Make sure the Div Block, slider_nav is nested inside the Div Block, slider_slider from Step 2
Copy this combo class:
Paste the combo class into a style selector of slider_dot.
Style your the combo classes.
eg. change the width and give the width transition a time of 1500ms and Easing of ease
Publish
Sponsor the Magic and
Buy Me a Beer
VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.
Think of it like buying me a pint for keeping your Webflow spells flowing.
You can support it here.
Cheers, legend!
This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.