slick

slick

the last carousel you'll ever need

Features

Fully responsive. Scales with it's 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.
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: 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...

Getting Started

Set up your HTML


<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

Add slick.css in your <head>


<link rel="stylesheet" type="text/css" href="slick.css"/>

Add slick.js before your closing <body> tag (requires >= jQuery 1.7)


<script type="text/javascript" src="slick.min.js"></script>

Initialize your slider in your scripts.js


$('.your-class').slick({
  setting-name: setting-value
});

Settings

Setting	Value	Description
autoplay	boolean, default: false	Enables Autoplay
dots	boolean, default: false	Show dot indicators
arrows	boolean, default: true	Prev/Next Arrows
draggable	boolean, default: true	Enable mouse dragging
infinite	boolean, default: true	Infinite loop sliding
onBeforeChange	function, default: null	Before slide callback
onAfterChange	function, default: null	After slide callback
responsive	object, default: null	Object containing breakpoints as keys and settings objects as values
slide	element, default: 'div'	Slide element
slidesToShow	int, default: 1	# of slides to show
slidesToScroll	int, default: 1	# of slides to scroll
speed	int(ms), default: 300	Slide speed
swipe	boolean, default: true	Enable swiping
touchMove	boolean, default: true	Enable slide motion with touch
touchThreshold	int, default: 5	Swipe distance threshold