# slick

the last carousel you'll ever need

# slick

the last carousel you'll 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: 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,
    });

## Fade

    $('.fade').slick({
      fade: true,
      cssEase: 'linear',
      speed: 1000,
      dots: true,
      infinite: true,
      slide: '.multiple'
    });

## 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 class="multiple"><h3>'+slideIndex+'</h3></div>');
    });

    $('.js-remove-slide').on('click', function(){
      $('.add-remove').slickRemove(slideIndex - 1);
      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();

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

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

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

Initialize your slider in your scripts.js

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

## Settings

Setting | Value | Description
--- | --- | ---
accessibility | boolean, default: true | Enables tabbing and arrow key navigation
autoplay | boolean, default: false | Enables Autoplay
autoplaySpeed | int(ms), default: 3000 | Autoplay Speed in milliseconds
arrows | boolean, default: true | Prev/Next Arrows
cssEase | string, default: 'ease' | CSS3 Animation Easing
dots | boolean, default: false | Show dot indicators
draggable | boolean, default: true | Enable mouse dragging
fade | boolean, default: false | Enable fade
easing | string, default: 'linear' | Add easing for jQuery animate. Use with easing libraries or default easing methods
infinite | boolean, default: true | Infinite loop sliding
onBeforeChange | function, default: null | Before slide callback
onAfterChange | function, default: null | After slide callback
pauseOnHover | boolean, default: true | Pause Autoplay On Hover
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
vertical | boolean, default: false | Vertical slide direction

## Methods

Method | Arguments | Description
--- | --- | ---
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 Object | Adds slide
slickRemove | index | Removes slide by index
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

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