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
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
Variable Width
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
Adaptive Height
$('.one-time').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
Data Attribute Settings
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
1
2
3
4
5
6
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
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,
cssEase: 'linear'
});
Add & Remove
$('.add-remove').slick({
slidesToShow: 3,
slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
slideIndex++;
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});
$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('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').slick('slickFilter',':even');
$(this).text('Unfilter Slides');
filtered = true;
} else {
$('.filtering').slick('slickUnfilter');
$(this).text('Filter Slides');
filtered = false;
}
});
Destroy
If you really want to be that guy...
$('.your-slider').slick('unslick');
Slider Syncing
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
Right to Left
$('.single-item-rtl').slick({
rtl: true
});
Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".