00:00
Buy Me a Beer
CMS

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:

vdx-slider-slider

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
Collection List
Collection Item
slider_prev
slider_next
Slider
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-slider
Value

Set the Collection List layout to Flex or Grid. In this example we are using Flex.

slider_slider
Collection List
Collection Item
slider_prev
slider_next
Collection List
Style
Settings
Interactions
Layout

Add Slide Attribute

Copy this attribute:

vdx-slider-slide

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

Slider
Collection List
Collection Item
slider_prev
slider_next
Collection Item
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-slide
Value

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

Slider
Collection List
Collection Item
slider_prev
slider_next
Collection Item
Style
Settings
Interactions
Style Selector
Collection Item
Size
Width
10 REM
Height
Auto
Transitions
Transform: 1000ms
Easing
ease

Add Previous Button Attribute

Copy this attribute:

vdx-slider-prev

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

Slider
Collection List
Collection Item
slider_prev
slider_next
slider_prev
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-prev
Value

Add Next Button Attribute

Copy this attribute:

vdx-slider-next

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

Slider
Collection List
Collection Item
slider_prev
slider_next
slider_next
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-next
Value

Add Inactive Class to buttons

Copy this attribute:

vdx--inactive

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 .

Slider
Collection List
Collection Item
slider_prev
slider_next
slider_next
Style
Settings
Interactions
Style Selector
slider_next
vdx--inactive
Backgrounds
Image & Gradient
Color
#302f2c

Delete the combo class and publish

Add active class to Slide

Copy this attribute:

vdx--active

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

Slider
Collection List
Collection Item
slider_prev
slider_next
Collection Item
Style
Settings
Interactions
Style Selector
Collection Item
vdx--active
Size
Width
12 REM
Height
Auto
Transitions
Width: 1500ms
Transform: 1000ms
Easing
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.

Slider
Collection List
Collection Item
slider_prev
slider_next
Collection Item
Style
Settings
Interactions
Style Selector
Collection Item
Size
Width
10 REM
Height
Auto
Transitions
Width: 500ms
Transform: 1500ms
Easing
ease

How to add a Navigation to a CMS Collection Slider in Webflow

Copy this attribute:

vdx-slider-nav

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

Slider
Collection List
Collection Item
slider_prev
slider_next
slider_nav
slider_dot
slider_nav
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-nav
Value

Add Nav Dot Attribute

Copy this attribute:

vdx-slider-dot

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

Slider
Collection List
Collection Item
slider_prev
slider_next
slider_nav
slider_dot
slider_dot
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-dot
Value

Add Nav Dot Active Class

Copy this attribute:

vdx--active

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

Slider
Collection List
Collection Item
slider_prev
slider_next
slider_nav
slider_dot
slider_dot
Style
Settings
Interactions
Settings
slider-dot
vdx--active

OPTION - Make Infinite Slider

Copy this value:

infinite

Paste the attribute into the Custom Attributes Value field of the vdx-slider-slider Attribute.

Slider
Collection List
Collection Item
slider_prev
slider_next
Slider
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-slider
Value
infinite

OPTION - Add Aotorotation / Loop

Copy this attribute:

vdx-slider-autorotate

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

Slider
Collection List
Collection Item
slider_prev
slider_next
Slider
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-slider-slider
Value
infinite
Name
vdx-slider-autorotate
Value
1000

Publish

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

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.