Create carousel for websites using Slick in JavaScript

In this tutorial we will learn to create carousel for websites using Slick in JavaScript.

Click here to visit Slick GitHub repository.

<!-- slick --><!-- slick ends here -->

Example

<!-- example --><!--/ example ends here -->

Install

Get the latest release from Slick GitHub repository.

Get the latest release of jQuery.

Step 1: Include jQuery

Include the jquery script 1.7+ in the page.

<script src="path/to/jquery.min.js"></script>

Step 2: Include the slick script

Include the slick.js script in the page.

<script src="path/to/slick.min.js"></script>

Step 3: Include the slick stylesheet

Include the stylesheet in the page.

<link rel="stylesheet" href="path/to/slick.min.css">

Optional, add the slick theme.

<link rel="stylesheet" href="path/to/slick-theme.css">

Step 4: Create HTML markup

In the given example we are using 5 images.

<div id="slick-images">
  <div><img src='cat1.jpg'></div>
  <div><img src='cat2.jpg'></div>
  <div><img src='cat3.jpg'></div>
  <div><img src='cat4.jpg'></div>
  <div><img src='cat5.jpg'></div>
</div>

Step 5: Configure Slick

Now we will write JavaScript code to configure Slick. We can either put our code inside the html page inside a script tag or create a separate .js file and include it in the page.

$("#slick-images").slick({
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	autoplay: true,
	autoplaySpeed: 2000,
	responsive: [
		{
			breakpoint: 1024,
			settings: {
				slidesToShow: 3,
				slidesToScroll: 3,
			}
		},
		{
			breakpoint: 600,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2
			}
		},
		{
			breakpoint: 480,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}
	]
});

In the above example we are using jQuery.

We are selecting the div having id slick-images and then attaching slick to it. The configuration options in the above example is self explanatory.

We have set dots to true which means we will show the dots below the images.

slidesToShow is set to 3 i.e., at any time we will have 3 slides to show.

slidesToScroll is set to 1 i.e., at any time only one slide is scrolled.

autoplay is set to true so it will auto scroll.

autoplaySpeed is set to 2000 which is in milliseconds. It is the speed of the auto scroll i.e., after 2000 ms (or 2 sec) the slide will scroll.

responsive is an array containing breakpoint and settings. So, as we increase of decrease the width of the browser the number of slides to show will increase or descrease.