slick - the last carousel youll ever need

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

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
});

Uneven Sets

1

2

3

4

5

6


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

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,
  slide: '> div',
  cssEase: 'linear'
});

Add & Remove

1

Add Slide Remove Slide


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

1

2

3

4

5

6

7

8

9

10

11

12

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

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...

Getting Started

Set up your HTML markup.


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

Move the /slick folder into your project

Add slick.css in your <head>


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

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


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Initialize your slider in your script file or an inline script tag


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

When complete, your HTML should look something like:


<html>
    <head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    </head>
    <body>

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

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.your-class').slick({
                setting-name: setting-value
            });
        });
    </script>

    </body>
</html>

NOTE: I highly recommend putting your initialization script in an external JS file.

Settings

Setting	Type	Default	Description
accessibility	boolean	true	Enables tabbing and arrow key navigation
adaptiveHeight	boolean	false	Enables adaptive height for single slide horizontal carousels.
autoplay	boolean	false	Enables Autoplay
autoplaySpeed	int(ms)	3000	Autoplay Speed in milliseconds
arrows	boolean	true	Prev/Next Arrows
asNavFor	string	null	Set the slider to be the navigation of other slider (Class or ID Name)
appendArrows	string	$(element)	Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
prevArrow	string (html\|jQuery selector) \| object (DOM node\|jQuery object)	<button type="button" class="slick-prev">Previous</button>	Allows you to select a node or customize the HTML for the "Previous" arrow.
nextArrow	string (html\|jQuery selector) \| object (DOM node\|jQuery object)	<button type="button" class="slick-next">Next</button>	Allows you to select a node or customize the HTML for the "Next" arrow.
centerMode	boolean	false	Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding	string	'50px'	Side padding when in center mode (px or %)
cssEase	string	'ease'	CSS3 Animation Easing
customPaging	function	n/a	Custom paging templates. See source for use example.
dots	boolean	false	Show dot indicators
draggable	boolean	true	Enable mouse dragging
fade	boolean	false	Enable fade
focusOnSelect	boolean	false	Enable focus on selected element (click)
easing	string	'linear'	Add easing for jQuery animate. Use with easing libraries or default easing methods
infinite	boolean	true	Infinite loop sliding
lazyLoad	string	'ondemand'	Set lazy loading technique. Accepts 'ondemand' or 'progressive'.
onBeforeChange	function	null	Before slide callback
onAfterChange	function	null	After slide callback
onInit	function	null	Callback that fires after first initialization
onReInit	function	null	Callback that fires after every re-initialization
pauseOnHover	boolean	true	Pause Autoplay On Hover
pauseOnDotsHover	boolean	false	Pause Autoplay when a dot is hovered
responsive	object	none	Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width.
slide	element	'div'	Element query to use as slide
slidesToShow	int	1	# of slides to show
slidesToScroll	int	1	# of slides to scroll
speed	int(ms)	300	Slide/Fade animation speed
swipe	boolean	true	Enable swiping
touchMove	boolean	true	Enable slide motion with touch
touchThreshold	int	5	To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
useCSS	boolean	true	Enable/Disable CSS Transitions
vertical	boolean	false	Vertical slide mode
rtl	boolean	false	Change the slider's direction to become right-to-left

Methods

Method	Arguments	Description
slickCurrentSlide	none	Returns the current slide index
slickGoTo	int : slide number	Navigates to a slide by index
slickNext	none	Navigates to the next slide
slickPrev	none	Navigates to the previous slide
slickPause	none	Pauses autoplay
slickPlay	none	Starts autoplay
slickAdd	html or DOM object, index, addBefore	Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String \|\| Object
slickRemove	index, removeBefore	Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter	Selector or Function	Filters slides using jQuery .filter()
slickUnfilter	index	Removes applied filtering
slickGetOption	option : string	Gets an individual option value.
slickSetOption	option : string, value : depends on option, refresh : boolean	Sets an individual value live. Set refresh to true if it's a UI update.
unslick	none	Deconstructs slick
getSlick	none	Get Slick Object

Go Get It

Download Now View On Github

You can also use slick with the jsDelivr CDN!


CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>

If you like slick, and also like Sass, try my Guff mixin library!