Donate with
Categories
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Create a slick slider with HTML, JavaScript and slick.js
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Slick is an powerful, responsive and fast carousel library written in JavaScript. Every <div> element can be instantiated as a slick-slider. The content withing the <div> element is going to be the slider. Arrows and dots which are sometimes needed for navigation can be added through parameters.
Slick is only working when you are using jQuery and slick. You have to download those libraries or use the CDN-URL in your <head> element in order to get your slider working.
I am going to show you in a quick example how to create a slick slider (simple & easy).
First we got some HTML elements nested inside of a <div> element:
<div class="please_make_me_slider"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> </div>
Now that we've got all those elements we can call the slider inside of jQuery's document ready function, which could look something like that:
jQuery(document).ready(function(){
var $ = jQuery;
$('.please_make_me_slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
dots: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
},
]
});
});
Now you have created a working and responsive slider gallery, which also is usable on mobile devices.