October 25, 2021

Create CMS Based Responsive Slider in Webflow Using Slick JS

Ashok Chavada

Webflow Expert

Create CMS Based Responsive Slider in Webflow Using Slick JS

Slick JS Slider is a very popular and widely used by the developer community as a website slider for banners and galleries.

Webflow made my life easier and saved me lot of time building static websites from scratch using HTML, CSS and JavaScript. When one of my client asked for a CMS slider in Webflow with more slider layout options. I immediately suggested him Slick JS slider and showed him some examples sites where we've implemented Slick slider.

I hope you already have a project created in Webflow if not then create a new one now.

Adding a CMS based website slider using Slick JS takes only 5 steps:

Add a New Webflow Collection:

I created a dummy collection named Galleries (see picture below). Add custom fields as per your requirements. Here I'm just adding an Image field.

CMS collection for CMS Slider in Webflow

Setup your HTML Markup

Once you've created your collection successfully. Close the collection tab and go to your desired page where you want to display the slider.

Add a new Collection List Wrapper from elements or just hit CTRL+E to open search bar in Webflow. Create a structure just like given below image.

HTML markup webflow

If you look at above collection list wrapper structure, I gave meaningful names to my lists and items for better understanding in the future and you should that kind of approach too in your projects.

Let me show you how slick slider works in a normal HTML page.


<div class="your-class"> 
	<div your content> 
  <div your content> 
  <div your content> 
</div>

As you can see in the above HTML markup that we have a class called your-class and that is what we will target from our JavaScript code to initialize Slick Slider.

Add CSS in your <head> Tag

Without adding CSS files/links your Slick Slider won't work. Go to your project settings and click on Custom Code Tab. Just scroll down a bit and you'll see that <head> code where you can paster below links in given order.

Head section of custom code in Webflow

We will add 2 Slick Slider CSS libraries from www.cdnjs.com


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 

Add Scripts Before Your </body> Tag Ends

In your custom code tab, scroll down once you finished adding your CSS files in <head> area. you'll see </body> tag area where you can add some CDN libraries for Slick Slider and Jquery.

See the picture below to learn how I added those scripts in my Webflow custom code section.

Head section of custom code in Webflow

Import these scripts into your Webflow project under <script> at page level code.


https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://code.jquery.com/jquery-migrate-1.2.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js

Initialize Slick Slider

To initialize slick slider in your Webflow project you need to add these code block at page level. See the given picture below.

page level custom code webflow

As you can see in the above given code snippet. I'm calling .your-class that I have declared in my collection list wrapper at lists level. Check the HTML Markup section of this post at the top.

Here's code for you to just copy and paste inside your <script> at page level.


$(document).ready(function(){
	$('.your-class').slick({ }); 
});

There are many things you can perform with Slick Slider like showing arrows, dots, auto play and responsive settings. To learn more about them check out their settings section on this page https://kenwheeler.github.io/slick/

Once all of the above steps are done just publish your project on Webflow staging site. Here's my project link https://testing-my-ideas.webflow.io/slick-slider-demo

Thank you for reading!

TweakDesigns is a Webflow certfified partner agency. We design and build Webflow websites, templates and integrate SEO. Subscribe to our newsletter or talk to our Webflow expert today for your queries.

Subscribe for updates from TweakDesigns—fresh insight delivered to your inbox every week.

By clicking this button, you agree to our
Privacy Policy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related posts

SEO

7 Ways to Increase Your Webflow Website Page Speed and Performance

Boost your Webflow website page loading speed without coding knowledge! Discover seven easy tricks to make sure your audience isn't waiting too long for a response.

read more

Ashok Chavada

April 10, 2023
Web Development

Webflow Costs: How Much Does a Webflow Website Cost in 2023?

Wondering how much a Webflow website costs? Look no further! This comprehensive guide breaks down all the factors that affect the price of a Webflow site.

read more

Ashok Chavada

April 10, 2023
Web Development

Top 5 Missing Features in Webflow and Their Solutions

Are you frustrated with the limitations of Webflow? Don't worry, we've got you covered. Learn how to solve the top 5 missing features in Webflow with this guide.

read more

Ashok Chavada

March 29, 2023
webflow professiona partner or freelancer expert badge