Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding a Carousel to Your Site with Slick.js
In this tutorial, we will demonstrate how you can use Slick.js to work with carousels and then add them to your websites. We will start with creating a simple carousel of images with the basic scroll being available to us and then slowly we will make some changes to the carousel by adding different properties to our carousel according to our needs.
If you try to create a carousel without using any libraries, it will be quite time consuming. To reduce the efforts and to be able to add multiple types of carousel with different properties, you can use slick.js.
Slick.js is a very famous and widely used jQuery plugin that allows us to create responsive carousels with multiple attributes and of different properties as well.
Features of Slick
There are multiple reasons why Slick.js is the perfect choice for carousels. Some of these reasons are mentioned below −
It provides a fully responsive carousel.
The carousel scales with its container.
It allows you to have separate settings with different breakpoints.
Can include CSS3 or not, your choice.
Desktop mouse dragging is available.
Infinite looping is present.
These are some of the popular features that Slick provides us over the traditional way of creating a carousel.
Creating Carousels using Slick
Now that we are familiar with Slick, it is time that we learn how we can use it to create carousels. The first step to create a carousel is to have an HTML file and a CSS file as well, as in these files, we will write the logic for our website which will contain a carousel as well.
Run the following command −
touch index.html styles.css
In the above command, we are creating two files, namely index.html and styles.css.
Note − It may be so that index.html might not work on your machine, please use vi command to create these two files.
Now, let's write the HTML code that we require to create a very basic carousel.
index.html
Example
<html>
<head>
<title> Slick Carousel - Example</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" />
<style>
html,
body {
background-color: #7b6e6d;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Slick Carousel - Example
<div class="carousel">
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk" width="300" height="235" alt="Image-1">
</div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" width="300" height="235" alt="Image-2">
</div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" width="300" height="235" alt="Image-3">
</div>
<div>
<img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU" width="300" height="235" alt="Image-4">
</div>
<div>
<img src="https://www.tutorialspoint.com/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc" width="300" height="235" alt="Image-5">
</div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ" width="300" height="235" alt="Image-6">
</div>
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q" width="300" height="235" alt="Image-7"> </div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" width="300" height="235" alt="Image-8"> </div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc" width="300" height="235" alt="Image-9"> </div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=fZe213BcO2KPQEJKChsdHnVYg-6kAtQMTZV24f1fS94" width="300" height="235" alt="Image-10"> </div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 2,
autoplay: true,
});
});
</script>
</body>
</html>
Explanation
Okay, so the tough part is over. Let's focus on how we are making use of Slick in our index.html file and what are the attributes and properties that we made use of.
The first thing when it comes to working with Slick is to be able to install it or make it available in our code, and there are different ways in which we can do this. The simplest approach is to use the CDN links and this is what I did in my html file.
The following code snippet shows two CDNs that are present in the head tag of our index.html file.
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" />
And then we also need to add a few more CDNs in our HTML, but not in the head, instead inside the body tag. Consider the code snippet shown below.
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
In the above code snippet, we are importing jQuery dependencies and also the slick.min.js that is used to add the js functionalities.
Now comes the interesting part, where we need to use Slick, and for that, you can see that I have created a class named carousel, inside which there are multiple divsthat contain different images with a specified height and width.
The class named carousel is used inside the script tag that we have inside the body tag, in which we are creating a jQuery function and then using the "$" operator and slick as a method in which we passed a single setting property, i.e., slidesToShow: 2, which tells Slick that we only want 2 slides to be shown at a time.
Now, if we run our index.html file in the browser, we should be able to see a carousel of different images with 2 images shown at a particular instant and we can also move to the next set of images by pressing the arrow buttons present at the left and the right centre of the images.
Adding Interesting Properties to the Carousel
So, our basic carousel is done. Now let's talk about adding interesting properties to change the behaviour of the carousel and this can be done with the help of adding setting properties in our ".slick({})" method.
Let's say that we also want the user of carousel to have a dots option in which he will be able to click and then go to a specific image and this can be done by adding a dots property. See the code snippet shown below.
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2, dots: true,
});
});
If we replace our earlier ".ready()" method with the code snippet shown above, then we will be able to see different numbers of dots present in the browser just below the carousel.
We can also change the type or class of the dots by just adding the dotsClass property, as shown below:
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2,
dots: true,
dotsClass: 'slick-dots',
});
});
There are multiple dotClasses available and the most popular ones are −
slick-dots
slick-carousel
slick-active
One of the most important features of carousel that you might have seen present in different carousels on websites is the autoplay feature, in which you can see that the carousel being automatically running without you having to click a button and then move on to the next image or div, and this can be easily done in Slick.js with the help of the autoPlay property. See the code snippet shown below.
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2,
dots: true,
dotsClass: 'slick-dots',
autoplay: true,
autoplaySpeed: 1000,
});
});
In the above code snippet, we have added a Slick with different attributes, and one of them is the autoplay property along with the autoplaySpeed which tells us that in what time should the next image or div be shown, and in our case, it is 1000 ms.
If you run the HTML code, you will see that the carousel will be in autoplay mode with the image being changing every 1000 ms or 1 second.
Conclusion
In this tutorial, we demonstrated how you can use Slick.js to create a carousel of your choice and add it on your website.
663 Views
