Webflow Dynamic CMS Slider

This Webflow Dynamic CMS Slider using Vanilla JavaScript has a new update for March 2024, which further extends your ability 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 additional code Add-on for automatically numbering slides is available on the Slick Media website.

Post 1

Post 2

Post 3

Post 4

Post 5

Usage

‍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

Multiple Sliders

Change the numeric values of the data attributes, such as data-dynamic-slider Value:2 and data-dynamic-slider-collection Value: 2.

The current version is 5.1. Please keep the code credits as per the code.

Post 1

Post 2

Post 3

Post 4

Post 5

Mixed Content Sliders

In addition to the main Collection Items, you can pull additional divs into the slider for mixed content. This functionality is useful where Collection content is limited, such as Divs with Background Videos or Webflow Components. Identify these additional divs with the data attribute data-dynamic-slider-div, which should correspond to the target slider, i.e. data-dynamic-slider-div="1". The default position is the first slide, but you can use additional attributes to set the position.

Additional Div (First)

Another Div (Set Random)

Another Div (Set 3rd)

Another Div (Set Last)

Post 1

Post 2

Post 3

Post 4

Post 5

Data Attributes

For the Slider

data-dynamic-slider:

Purpose: This attribute uniquely identifies each slider.
Where to Set: Add this attribute to each slider element on your page.
Example: <div data-dynamic-slider="1" class="your-slider-class">...</div>

data-dynamic-slider-collection:

Purpose: Associates a collection of items with a specific slider.
Where to Set: Set this on collection items that you want to be part of the slider, matching the slider's data-dynamic-slider value.
Example: <div data-dynamic-slider-collection="1">...</div>

data-dynamic-slider-nav:

Purpose: Controls the visibility of the slider navigation dots.
Where to Set: On the slider element.
Options: "true" (always show), "false" (hide), or a number (hide if the number of slides is less than or equal to this number).
Example: <div data-dynamic-slider="1" data-dynamic-slider-nav="true">...</div>

data-dynamic-slider-arrows:

Purpose: Controls the visibility of the slider left/right arrows.
Where to Set: On the slider element.
Options: Same as data-dynamic-slider-nav.
Example: <div data-dynamic-slider="1" data-dynamic-slider-arrows="2">...</div>

For Dynamic Divs

data-dynamic-slider-div:

Purpose: Identifies additional divs to be included as individual slides in the slider.
Where to Set: On div elements that you want to include as slides, matching the data-dynamic-slider value of the slider.
Example: <div data-dynamic-slider-div="1">...</div>

data-dynamic-slider-div-position:

Purpose: Specifies the position of the div within the slider.
Where to Set: On the additional divs.
Options: "first", "last", "random", or a specific slide number (e.g., "1", "2").
Example: <div data-dynamic-slider-div="1" data-dynamic-slider-div-position="first">...</div>

The current version is 5.1. Please keep the code credits as per the code.