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
- }
- }
- ]
-});
- -
Adaptive Height
- -
-$('.one-time').slick({
- dots: true,
- infinite: true,
- speed: 300,
- slidesToShow: 1,
- adaptiveHeight: true
-});
- -
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
- -
- Filter Slides
-
-
-$('.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();
- -
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".
--