Features
- Fully responsive. Scales with its container.
- Separate settings per breakpoint
- Uses CSS3 when available. Fully functional when not.
- Swipe enabled. Or disabled, if you prefer.
- Desktop mouse dragging
- Infinite looping.
- Fully accessible with arrow key navigation
- Add, remove, filter & unfilter slides
- Autoplay, dots, arrows, callbacks, etc...
Single Item
$('.single-item').slick();
Multiple Items
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
Responsive Display
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
One At A Time
$('.one-time').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 5,
touchMove: false,
slidesToScroll: 1
});
Uneven Sets
$('.uneven').slick({
slidesToShow: 4,
slidesToScroll: 4
});
Center Mode
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
Lazy Loading
// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src
<img data-lazy="img/lazyfonz1.png"/>
$('.lazy').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1
});
Autoplay
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
Fade
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
slide: '> div',
cssEase: 'linear'
});
Add & Remove
$('.add-remove').slick({
slidesToShow: 3,
slidesToScroll: 3
});
var slideIndex = 1;
$('.js-add-slide').on('click', function(){
slideIndex++;
$('.add-remove').slickAdd('<div><h3>'+slideIndex+'</h3></div>');
});
$('.js-remove-slide').on('click', function(){
$('.add-remove').slickRemove(slideIndex - 1);
if (slideIndex !== 0) {
slideIndex--;
}
});
Filtering
$('.filtering').slick({
slidesToShow: 4,
slidesToScroll: 4
});
var filtered = false;
$('.js-filter').on('click', function(){
if(filtered === false) {
$('.filtering').slickFilter(':even');
$(this).text('Unfilter Slides');
filtered = true;
} else {
$('.filtering').slickUnfilter();
$(this).text('Filter Slides');
filtered = false;
}
});
Destroy
If you really want to be that guy...
$('.your-slider').unslick();