Back to Home Back to Post

jQuery Slick Demos

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: false,
  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
      }
    }
  ]
});

One At A Time

1

2

3

4

5

6


$('.one-time').slick({
  dots: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  touchMove: false
});

Uneven Sets

1

2

3

4

5

6


$('.uneven').slick({
  slidesToShow: 4,
  slidesToScroll: 4
});

Autoplay

1

2

3

4

5

6


$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Destroy

If you really want to be that guy...


$('.your-slider').unslick();

and a whole lot more...