Webflow CMS Slider v1.0
Create a CMS powered custom Slider with a Webflow CMS Collection List.
How to Build a CMS Collection slider in Webflow
Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.
Add Slider Attribute
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
Set the Collection List layout to Flex or Grid. In this example we are using Flex.
Add Slide Attribute
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 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
Add Previous Button Attribute
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
Add Next Button Attribute
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 from Step 2
Add Inactive Class to buttons
Copy this attribute:
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
Add active class to Slide
Copy this attribute:
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.
How to add a 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 from Step 2
Add Nav Dot Attribute
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
Add Nav Dot Active Class
Copy this attribute:
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
OPTION - Make Infinite Slider
Copy this value:
Paste the attribute into the Custom Attributes Value field of the vdx-slider-slider Attribute.
OPTION - Add Aotorotation / Loop
Copy this attribute:
Paste the attribute into a Custom Attributes Name field of the
Slider.Element.
Control the change interval by adding a value in milliseconds:
500 = 500ms or 0.5 seconds
1000 = 1000ms or 1 second
2000 = 2000ms or 2 seconds
The default interval speed is set to 3000ms
OPTION - Add slider Thumbnail
Copy this attribute:
Add a second Collection List inside the Slider
Paste the attribute into the Custom Attributes Name field of the second Webflow Collection Item.
Add Thumbnail Active Class
Copy this attribute:
Paste the combo class into a style selector of Collection Item
Style your the combo classes.
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.