Slick Carousel

The responsive option allows you to change settings at specific breakpoints. You can also use the value "unslick" to destroy the carousel at a specific breakpoint.

$(".slider").slick({
  infinite: false,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    }, {
      breakpoint: 300,
      settings: "unslick" // destroys slick
    }]
});

You can install Slick using standard package managers.

Note: Version 2.0.0 is currently not available via Bower or NPM; use CDN links for the latest version.

# Bower
bower install --save slick-carousel

# NPM
npm install slick-carousel

If using Sass, you can customize the appearance of Slick using the following variables:

• $slick-font-path: Directory path for the slick icon font.
• $slick-font-family: Font-family for slick icon font.
• $slick-arrow-color: Color of the left/right arrow icons.
• $slick-dot-color: Color of the navigation dots.
• $slick-dot-color-active: Color of the active navigation dot.
• $slick-prev-character: Unicode character code for the previous arrow icon.
• $slick-next-character: Unicode character code for the next arrow icon.

To initialize a Slick carousel, call the .slick() method on a jQuery object. You can pass an optional configuration object to customize the behavior. Slick can also be configured via HTML data-slick attributes on the element.

$('.your-element').slick({
  // settings go here
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

In Slick 1.5+, you can define settings directly in your HTML using the data-slick attribute. You must still call $(element).slick() to initialize the carousel.

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

<script>
  // You still need to call this to initialize
  $('.your-element').slick();
</script>

Slick uses jQuery events for callbacks. To ensure events are captured, define them before initializing the slider.

Common events include:

• afterChange: After slide change.
• beforeChange: Before slide change.
• init: When Slick initializes (must be defined before initialization).
• swipe: Fires after swipe/drag.
• edge: Fires when an edge is overscrolled in non-infinite mode.

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

You can interact with a Slick instance by calling methods through the jQuery .slick() function.

Core Methods:

• slick(options): Initializes Slick.
• unslick: Destroys Slick.
• slickNext: Triggers next slide.
• slickPrev: Triggers previous slide.
• slickGoTo(index, dontAnimate): Goes to slide by index.
• slickCurrentSlide: Returns the current slide index.
• slickAdd(element, index, addBefore): Adds a slide.
• slickRemove(index, removeBefore): Removes a slide.
• slickSetOption(option, value, refresh): Changes a single option.

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

// Change the speed
$('.your-element').slick('slickSetOption', 'speed', 5000, true);

// Destroy with
$('.your-element').slick('unslick');

Slick accepts an options object during initialization. Common settings include:

• accessibility (boolean): Enables tabbing and arrow key navigation.
• autoplay (boolean): Enables auto play of slides.
• dots (boolean): Shows current slide indicator dots.
• infinite (boolean): Enables infinite looping.
• slidesToShow (int): Number of slides to show at a time.
• slidesToScroll (int): Number of slides to scroll at a time.
• speed (int): Transition speed in ms.
• swipe (boolean): Enables touch swipe.

See the full list of options in the documentation for advanced configurations like lazyLoad, centerMode, and variableWidth.

Use slickGoTo(slide, dontAnimate) to jump to a specific slide index.

• slide: The index of the slide to navigate to.
• dontAnimate: (Optional) A boolean indicating whether to skip the animation.

// Go to the third slide (index 2)
$('.your-slider').slick('slickGoTo', 2);

// Go to the third slide without animation
$('.your-slider').slick('slickGoTo', 2, true);