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

1 2 3 4 5 6

$('.single-item').slick();

Multiple Items

1 2 3 4 5 6 7 8 9

$('.multiple-items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 });

Responsive Display

1 2 3 4 5 6 7 8

$('.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

200 175 150 300 225 125

$('.variable-width').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true });

Adaptive Height

1 2 Look ma! 3 Check

this out! 4 Woo!

$('.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

1 2 3 4 5 6

$('.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

1 2 3 4 5 6

$('.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

1

$('.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

1 2 3 4 5 6 7 8 9 10 11 12

$('.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

1 2 3 4 5

1 2 3 4 5

$('.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

1 2 3 4 5 6

$('.single-item-rtl').slick({ rtl: true });

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

and a whole lot more...