A robust native Webflow slider is "one of the simplest and most powerful components in the Webflow Designer", but it is currently restricted as it cannot handle dynamic collection list content pulled from the Webflow CMS. This limitation is significant because Webflow Collections are integral to many Webflow websites. Indeed, if this is holding you off from diving into Webflow, wait no longer, as a dynamic Webflow CMS Slider solution is at hand.

In a previous post, we bridged a critical gap by making a Responsive Webflow Slider with CSS only, and here we take it one step further with dynamic CMS collection list content as slider slides. Unlike other methods for creating a Webflow CMS Slider, including the documented Webflow CMS Slider hack with pagination, this tried and tested Slick Media approach uses the native Webflow Slider and Vanilla JavaScript with no external scripts. This super-lightweight Webflow-friendly dynamic CMS slider is perfect for most uses like Latest Posts, News, Testimonials, People, Brand/Logo Carousel and various other dynamic CMS items.

Example Webflow Dynamic CMS Slider

This Webflow Slider dynamically loads our current Promotions Collection from the Webflow CMS.

A Quick intro to how the Webflow CMS Slider Works

In a nutshell, the Webflow CMS Slider script counts the number of Webflow CMS Collection Items and then searches for additional mixed-content Divs to add. It then dynamically creates the corresponding number of slides in the native Webflow Slider, less the initial default slide. The Collection Items are removed from the original Collection List and placed within the empty slides and if applicable the additional mixed-content Divs are also added in the assigned positions. Then, the slides run as if they were initially within a regular Webflow slider.

Webflow Dynamic CMS Slider Setup

The setup for the Webflow CMS Slider, which uses Data Attributes, is very straightforward and requires just five basic steps within the Webflow Designer. You can clone the Made in Webflow Webflow Dynamic CMS Slider for rapid implementation. Alternatively, follow these simple steps:-

‍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 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 panel settings.

5. That's it, you can now Publish your Dynamic Webflow CMS Slider

Multiple Dynamic CMS Sliders

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

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.

Webflow Dynamic CMS Slider Add-on Script

Automatically add slide number to the Slides with the ability to prepend the value such as 'Slide 1', Slide 2' etc. Add the following code to the closing body tag of your page: -

After adding the code add a div in the Slider Slide with a predefined Class (e.g. .slide-number) and then on the slider add the attribute 'data-dynamic-slider-number-target' with the value of your class. To prepend the slide number value add the data attribute data-dynamic-slider-number-text with a text value such as 'Slide'.

Data Attributes for Webflow Dynamic CMS Slider Configurations

For the Slider

  1. 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>
  2. 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>
  3. 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>
  4. 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>
  5. data-dynamic-slider-number-target (From Add-on Script):
    • Purpose: Specifies the selector of the element within each slide where the slide number will be displayed.
    • Where to Set: On the slider element.
    • Example: <div data-dynamic-slider="1" data-dynamic-slider-number-target=".slide-number">...</div>
  6. data-dynamic-slider-number-text (From Add-on Script):
    • Purpose: Text to prepend to the slide number (e.g., "Slide").
    • Where to Set: On the slider element.
    • Example: <div data-dynamic-slider="1" data-dynamic-slider-number-text="Slide">...</div>

For Dynamic Divs

  1. 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>
  2. 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>

Customisations for the Webflow CMS Slider

As this uses native Webflow Sliders and Collections, you can style element levels as much or as little as you want.

For the Slider, you can add style customisations and make it responsive using our previous post on creating a Responsive Webflow Slider with CSS only. Other Slider customisations might include changing the width of the slides by adding a custom class to the single slider slide (Slide 1) to show more than one collection item per slide transition. You can style the Collection List Item(s) to how you would like them to appear in the Slider while noting that the parent container will become the Slider 'Slide'. Add your classes and elements (Images, Link Blocks, Rich Text, etc.) to the Collection items as necessary.

Webflow CMS Slider Considerations

The Webflow CMS Slider provides a simple and robust way of displaying dynamic CMS content within the native Webflow environment. While there are no specific limitations, there are some considerations.

1. You can use the Webflow CMS Script and method for your projects, but you must maintain the Slick Media credit and code 'as is'. If you identify ways of enhancing the Webflow CMS Slider before Slick Media, let us know in the comments below😉. Credit where credit is due, so please don't modify or pass off the code as your own. 

2. Consider the number of Collection items & therefore, Slides to reduce Slider and page load times. You should set a sensible slider limit based on the type/mix of content within the CMS Collection Item(s). A limit of 20 Collection Items to 20 20-slides is reasonable for sliders with images (particularly Hero Sliders with larger images of circa 2500px width), but text-only sliders can handle many more. 

Enjoy your Webflow CMS Slider(s), and please leave feedback and examples of your usage in the comments below.