Build a Carousel with Slick

Are you looking to add a carousel or any sliding? I recently did and now take the time to share it with you. Let's see together how we can do this.

We will go through the steps of implementing Slick scripts and styles in order to integrate a sliding carousel as smoothly as possible.

Prepare your code

We can download the files by going to Slick website or Github.

You can also point to these CDN links for the CSS and JavaScript sources.

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Now we will need to create our Slick HTML element. It will be the parent to a list of div containing the content. The Slick parent will use the slick id and will have a data-slick attribute.

<div id="slick" data-slick='{}'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

In this case there will be 6 slides defined by div elements. That's where we will add our content (cfr Codepen example).

We need an extra step to make our basic carousel working. In JavaScript we will initiate our Slick element.

$("#slick").slick({});

We now have a basic, Slick carousel. What if we need to change some settings?

Opt for our carousel settings

We can work with a wide range of settings.
Here are the most useful ones:

• The sliding speed in ms: speed
• The number of slides to show: slidesToShow
• The number of slides to scroll: slidesToScroll
• Whether the carousel slides indefinitely or not: infinite
• The responsiveness: responsive

Those settings can be defined in the HTML inside the data-slick attribute but I would advise to define those inside the JavaScript.

$("#slick").slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3
});

Our Carousel is now working following our new settings! Let's see how it could look like.

Live example on Codepen

Isn't an example worth a million words? 😄

A bit heavy since it uses jQuery, Slick is still a really straightforward integration.
Huge thanks to Ken Wheeler!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇