The Best Simple Webflow CMS Slider

To see step by step how to set this up, watch my video tutorial on it.

Add this code to <head> section in your project settings or in the page settings that you are using the CMS slider on:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

And add this code to the </body> section:

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://weblocks.io/library.js"></script>
<script src="https://weblocks.io/script-66-529.js"></script>

Now add the CMS collection onto you page add design your slider how you want it to appear on the page. In this case I have set a fixed width for each item (of 24vw), so that the slider overflows it's wrapper if it has too many items.

Next change the class names for the CMS collection. You will need to use Slider Wrapper for the wrapper, Slider List for the list, and Slider Item for the item (I mean duh).

With this done you can already publish your website and test the slider.

To take it a step further you can also add in navigation buttons. Simply add in any elements or divs that you want to use for previous and next buttons, and then put them in a div together.

You will want to give the div that wraps the buttons a class of Slider Navigation Wrapper, give each button the class of Slider Navigation, and then add Prev Slide and Next Slide classes on top of these to state which button triggers the slider to go back or forward.

Download Assets

See an Example Website