Settings

Complete reference for all Slick Carousel configuration options

Settings

All settings can be configured when initializing Slick or via data attributes. Below is the complete list of available options.

Basic Usage

$('.your-slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1
});

Data Attribute Configuration

In Slick 1.5+, you can add settings using the data-slick attribute:

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

Configuration Options

accessibility · boolean · default: "true"

Enables tabbing and arrow key navigation. Unless autoplay: true, sets browser focus to current slide (or first of current slide set, if multiple slidesToShow) after slide change. For full a11y compliance enable focusOnChange in addition to this.

adaptiveHeight · boolean · default: "false"

Adapts slider height to the current slide.

appendArrows · string | jQuery object · default: "$(element)"

Change where the navigation arrows are attached. Accepts Selector, htmlString, Array, Element, or jQuery object.

appendDots · string | jQuery object · default: "$(element)"

Change where the navigation dots are attached. Accepts Selector, htmlString, Array, Element, or jQuery object.

arrows · boolean · default: "true"

Enable Next/Prev arrows.

asNavFor · string · default: "null"

Enables syncing of multiple sliders. Pass a jQuery selector or element.

autoplay · boolean · default: "false"

Enables auto play of slides.

autoplaySpeed · integer · default: "3000"

Auto play change interval in milliseconds.

centerMode · boolean · default: "false"

Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.

centerPadding · string · default: "'50px'"

Side padding when in center mode. Accepts values in px or %.

cssEase · string · default: "'ease'"

CSS3 easing function for transitions.

customPaging · function · default: "n/a"

Custom paging templates. Accepts a function that returns HTML for each dot.

customPaging: function(slider, i) {
  return $('<button type="button"></button>').text(i + 1);
}

dots · boolean · default: "false"

Show current slide indicator dots.

dotsClass · string · default: "'slick-dots'"

Class name for slide indicator dots container.

draggable · boolean · default: "true"

Enables desktop dragging with mouse.

easing · string · default: "'linear'"

jQuery animate() fallback easing function.

edgeFriction · number · default: "0.35"

Resistance when swiping edges of non-infinite carousels. Value between 0 and 1.

fade · boolean · default: "false"

Enables fade transition between slides instead of slide animation.

focusOnSelect · boolean · default: "false"

Enable focus on selected element when clicked.

focusOnChange · boolean · default: "false"

Puts focus on slide after change for improved accessibility.

infinite · boolean · default: "true"

Enables infinite looping of slides.

initialSlide · integer · default: "0"

Slide index to start on (zero-based).

lazyLoad · string · default: "'ondemand'"

Lazy load technique. Accepts:

• 'ondemand': Loads image as soon as you slide to it
• 'progressive': Loads one image after the other when page loads

mobileFirst · boolean · default: "false"

Responsive settings use mobile first calculation.

nextArrow · string | jQuery object

Allows you to select a node or customize the HTML for the “Next” arrow. Can be an HTML string, jQuery selector, or DOM node.

pauseOnDotsHover · boolean · default: "false"

Pauses autoplay when a dot is hovered.

pauseOnFocus · boolean · default: "true"

Pauses autoplay when slider is focused.

pauseOnHover · boolean · default: "true"

Pauses autoplay when slider is hovered.

prevArrow · string | jQuery object

Allows you to select a node or customize the HTML for the “Previous” arrow. Can be an HTML string, jQuery selector, or DOM node.

respondTo · string · default: "'window'"

Width that responsive object responds to. Options:

• 'window': Responds to window width
• 'slider': Responds to slider width
• 'min': Responds to the smaller of the two

responsive · array · default: "null"

Array of objects containing breakpoints and settings objects. Enables settings at given breakpoint. Set settings to "unslick" to disable slick at a given breakpoint.

responsive: [
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      infinite: true
    }
  },
  {
    breakpoint: 600,
    settings: {
      slidesToShow: 2,
      dots: true
    }
  },
  {
    breakpoint: 300,
    settings: "unslick" // destroys slick
  }
]

rows · integer · default: "1"

Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.

rtl · boolean · default: "false"

Change the slider’s direction to become right-to-left.

slide · string · default: "''"

Slide element query selector.

slidesPerRow · integer · default: "1"

With grid mode initialized via the rows option, this sets how many slides are in each grid row.

slidesToScroll · integer · default: "1"

Number of slides to scroll at a time.

slidesToShow · integer · default: "1"

Number of slides to show at a time.

speed · integer · default: "500"

Transition speed in milliseconds.

swipe · boolean · default: "true"

Enables touch swipe on mobile devices.

swipeToSlide · boolean · default: "false"

Swipe to slide irrespective of slidesToScroll setting.

touchMove · boolean · default: "true"

Enables slide moving with touch.

touchThreshold · integer · default: "5"

To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.

useCSS · boolean · default: "true"

Enable/Disable CSS Transitions.

useTransform · boolean · default: "true"

Enable/Disable CSS Transforms.

variableWidth · boolean · default: "false"

Disables automatic slide width calculation. Useful for slides with varying widths.

vertical · boolean · default: "false"

Vertical slide direction.

verticalSwiping · boolean · default: "false"

Changes swipe direction to vertical.

waitForAnimate · boolean · default: "true"

Ignores requests to advance the slide while animating.

zIndex · number · default: "1000"

Set the zIndex values for slides, useful for IE9 and lower.

Responsive Configuration Example

The responsive option allows you to define different settings at different breakpoints:

$('.slider').slick({
  infinite: false,
  slidesToShow: 4,
  slidesToScroll: 4,
  
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        dots: true
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});