How to use JavaScript Slick library to make interactive Carousel

What are the prerequisites of Slick.js ?

Include the script and styling

  • To download the slick.js and slick.css file from here and copy both files into the project. Then use this below script.
  • Another way is to use the CDN links that are easy and don’t require any other file.

Let’s understand with the example

<div class=”carousel-container”>
<div class=”slide”>Slide-1</div>
<div class=”slide”>Slide-2</div>
<div class=”slide”>Slide-3</div>
<div class=”slide”>Slide-4</div>
<div class=”slide”>Slide-5</div>
<div class=”slide”>Slide-6</div>
</div>
// initialize the slick function$(“.carousel-container”).slick({
autoplay: true,
slidesToShow: 3,
slidesToScroll: 1,
speed: 350,
});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Siddharth Rastogi

Siddharth Rastogi

I am a full stack developer, I have an expertise in Web Development. I write tech stuff and share my knowledge with others with the help of articles.