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. As Webflow Collections are an integral part of many Webflow websites, this is a significant limitation. 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, no external scripts and a minimal jQuery custom code embed. 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 dynamically creates the corresponding number of slides in the native Webflow Slider. 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. 

Webflow Dynamic CMS Slider Setup

The setup for the Webflow CMS Slider is very straightforward and requires just 9 basic steps within the Webflow Designer:-

1. Drag the native Webflow Slider component onto the Webflow Designer Canvas.

2. Delete the automatically added 'Slide 2' in the 'Webflow Slider', leaving 'Slide 1' as only one slide is required, and this is also the slide you can style for all your dynamic Collection items.

3. Give the Slider the ID 's1' - or use your ID that will require a quick ID change in the jQuery custom code in step 8.

4. Drag a CMS 'Collection List' component onto the Webflow Canvas and connect your chosen CMS Collection items 'Source'. In this example, the source is the current Slick Media Promotions Collection.

5. Give the 'Collection List Wrapper' the ID 'i1' - or use your ID that will require a quick ID change in the jQuery custom code in step 8. You can also add an optional class with a CSS style of display: none; if you want to avoid a flash of the Collection list contents before the Collection items load into the Slider.

6. Drag a Custom Code 'Embed' component onto the Webflow Designer Canvas. The positioning of the Webflow Custom Code Embed element on the Canvas is not essential, but a recommended placement is the first item within the native Webflow Slider Component.

7. Open the 'Embed' Code Editor by a double-click or single click and click the 'Open Code Editor' button in the HTML Embed Settings panel identified by a Cog in the right sidebar in the Webflow Designer.

8. Copy & Paste the following jQuery Webflow CMS Slider Script into the Webflow Custom Code 'Embed' component.

At the top of the code, add '<script>'; at the base of the code, add '</script>' to wrap the script tags. If you have used the IDs set in steps 3 & 5 above, you can hit 'Save & Close'. However, if you have set custom IDs, update the existing #s1 and #i1 IDs directly below "// you only need to set the Slider ID and the Collection List Wrapper IDs". No further code edits are necessary, so you can then 'Save & Close'.

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

Customisations for the Webflow CMS Slider

As long as you set the IDs to the Webflow Slider Component and the dynamic Collection List Wrapper, you can style all element levels as much or as little as you want.

You can treat the Slider and Collection List as standard Webflow components and entirely style them to your liking. For the Slider, you can 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 Slider 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. 

3. You can have more than one dynamic CMS Slider per page, but you'll need to use unique IDs and multiple instances of the elements. So, if you want two CMS Sliders on a page, then using the setup logic above, you will have '#s1' & '#s2' for the separate Sliders and '#i1' & '#i2' for the independent CMS Collections providing the slide content. To make it all happen, you should include those different IDs in the duplicated script, either in the same custom code, 'Embed' or in individual embed components. 

Webflow CMS Slider hurdles

Other than the fact that Webflow doesn't currently have a native method of binding CMS Collection items to slides within the Webflow Slider, there was a notable hurdle to overcome when creating this dynamic Webflow CMS Slider: - 

1. The Webflow CMS Slider requires the jQuery library to load in the head, but Webflow doesn't work that way :-(

For some reason still unknown, Webflow loads the jQuery library before the closing </body> tag on the site's pages. This configuration means that jQuery any code dependent on the jQuery library that fires before jQuery loads will not run. jQuery should always load in the <head> of the site as jQuery/JavaScript are loaded linearly and synchronously. As this script places before jQuery loads in Webflow, the code also listens for jQuery before triggering. While the script will now work in Webflow without any additions, it is still somewhat advantageous to add the minified jQuery library again and in the <head> so that all jQuery scripts will run without further modification. Of course, the solution here is that @Webflow load jQuery in the <head> of the document so that jQuery scripts run without issue top to bottom. 

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