Webflow is a powerful tool for designing and building websites without the need for coding. One of the most popular features of Webflow is the ability to create sliders or carousels to display content such as images or testimonials. In this tutorial, we will show you how to create a responsive slider in Webflow using Slick JS with CMS integration.

Step 1: Create a CMS Collection

First, you will need to create a CMS Collection for the content that you want to display in the slider. To do this, go to the Collections tab in your Webflow project and click the “+ New Collection” button. Give your collection a name and add fields for the content you want to display, such as an image field, a text field for the slide title, and a text field for the slide description.

Step 2: Add a Collection List to the Page

Next, add a Collection List to the page where you want the slider to appear. Drag a Collection List from the Elements panel onto the canvas and select the collection you just created from the dropdown menu.

Step 3: Style the Collection List

Now you can style the Collection List to match the design of your website. Set the layout to “Slider” in the settings panel, and adjust the slider settings to your liking. You can also add classes to the Collection List to style it further with custom CSS.

Step 4: Add Slick JS

To add Slick JS to your Webflow project, go to the Slick JS website and download the latest version of the library. Extract the files from the ZIP folder and upload them to your Webflow project in the Assets panel.

Step 5: Add Slick JS to the Page

Now you need to add Slick JS to the page where your slider is located. Go to the page settings and paste the following code into the “Custom Code” section:

<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
$(document).ready(function(){
  $('.slider').slick({
    arrows: true,
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear'
  });
});
</script>

This code initializes Slick JS and sets the default options for the slider. Make sure to replace “.slider” with the class name of your Collection List.

Step 6: Connect the Collection List to Slick JS

Finally, you need to connect the Collection List to Slick JS. Add a custom attribute to the Collection List called “data-slick” and set its value to “.slider”. This tells Slick JS to use the Collection List as the slider.

Step 7: Preview and Publish

Preview your Webflow project to see the slider in action. You can adjust the Slick JS options in the code to customize the slider further, such as changing the animation speed or adding autoplay.

When you’re ready, publish your Webflow project to make the slider live on your website.

Conclusion

With the power of Webflow and Slick JS, you can create a responsive slider with CMS integration in just a few easy steps. By using a Collection List to populate the slider with dynamic content, you can easily update the slider with new content without having to edit the code.