Click here to visit Slick GitHub repository.
Get the latest release from Slick GitHub repository.
Get the latest release of jQuery.
Include the jquery script 1.7+ in the page.
Include the slick.js script in the page.
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">
In the given example we are using 5 images.
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.
Have fun learning :-)
Copyright © 2014 - 2020 DYclassroom. All rights reserved.
rendered in 0.0136 sec