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. 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. Then, the slides run as if they were initially within a regular Webflow slider.

For consistency and robustness in Webflow, the script runs within the Webflow push function, which means the Slider will always run even when extracted and inserted externally via custom code.

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 as a Webflow Embed component or in the page code.

‍2. Add instance(s) of Webflow Slider and ensure that you have one default Slide and then 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 set 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-collection Value: 1. If you are using one Slider per page then you can set the attribute directly on the 'Collection Wrapper'.

4. 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

You can easily add Multiple Dynamic CMS Sliders by changing the numeric values of the data attributes, such asdata-dynamic-slider Value:2 and data-dynamic-collection Value: 2. Make sure that the data attribute numbers match up to your Webflow Sliders and Webflow Collections and that all instances are unique to avoid conflicts.

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.