slick

the last carousel you'll ever need

slick

the last carousel you'll ever need

Features


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

One At A Time

1

2

3

4

5

6


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

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


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

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
autoplay boolean false Enables Autoplay
autoplaySpeed int(ms) 3000 Autoplay Speed in milliseconds
arrows boolean true Prev/Next Arrows
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
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
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 Swipe distance threshold
useCSS boolean true Enable/Disable CSS Transitions
vertical boolean false Vertical slide mode

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

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.6/slick.css"/>

JS

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

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