Configuration

Overview

Slick Carousel provides extensive configuration options to customize the behavior and appearance of your carousel. This guide covers initialization methods, common settings, and how different options work together.

Initialization

Basic Initialization

The most basic way to initialize Slick is using jQuery:

$(element).slick({
  dots: true,
  speed: 500
});

Data Attribute Initialization

As of Slick 1.5, you can add settings using the data-slick attribute. You still need to call $(element).slick() to initialize:

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

When using data attributes, ensure your JSON is properly formatted with double quotes and escaped correctly.

Core Settings

Display Options

slidesToShow

integer

default:"1"

Number of slides to show at a time. Controls how many slides are visible in the viewport.

slidesToScroll

integer

default:"1"

Number of slides to scroll at a time when navigating. Works in conjunction with slidesToShow.

infinite

boolean

default:"true"

Enables infinite looping. When enabled, the carousel will continuously loop through slides.

initialSlide

integer

default:"0"

Slide to start on. Zero-indexed, so 0 is the first slide.

arrows

boolean

default:"true"

Enable Next/Prev navigation arrows.

prevArrow

string | object

Customize the HTML for the “Previous” arrow. Accepts an HTML string, jQuery selector, or DOM node.

nextArrow

string | object

Customize the HTML for the “Next” arrow. Accepts an HTML string, jQuery selector, or DOM node.

dots

boolean

default:"false"

Show dot indicators for slide navigation.

dotsClass

string

default:"slick-dots"

Class name for the dots container element.

Animation Settings

speed

integer

default:"500"

Transition speed in milliseconds. From source code: default is 500ms (Note: README states 300, but source shows 500).

fade

boolean

default:"false"

Enable fade effect. When enabled, slides will fade in/out instead of sliding.

cssEase

string

default:"ease"

CSS3 easing function for transitions. Examples: 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'.

easing

string

default:"linear"

jQuery animate() fallback easing for browsers without CSS transitions.

useCSS

boolean

default:"true"

Enable or disable CSS transitions. When disabled, falls back to jQuery animations.

useTransform

boolean

default:"true"

Enable or disable CSS transforms for slide positioning.

Autoplay

autoplay

boolean

default:"false"

Enable automatic slide advancement.

autoplaySpeed

integer

default:"3000"

Autoplay interval in milliseconds. Delay between automatic slide changes.

pauseOnHover

boolean

default:"true"

Pause autoplay when hovering over the slider.

pauseOnFocus

boolean

default:"true"

Pause autoplay when the slider receives focus.

pauseOnDotsHover

boolean

default:"false"

Pause autoplay when hovering over dot navigation.

Center Mode

centerMode

boolean

default:"false"

Enable centered view with partial prev/next slides. Best used with odd numbered slidesToShow counts.

centerPadding

string

default:"50px"

Side padding when in center mode. Accepts pixel or percentage values.

When using centerMode: true, Slick automatically sets slidesToScroll: 1 regardless of your configuration.

Advanced Settings

Adaptive Height

adaptiveHeight

boolean

default:"false"

Adapt slider height to the current slide. Useful when slides have varying heights.

$('.slider').slick({
  adaptiveHeight: true,
  slidesToShow: 1
});

Variable Width

variableWidth

boolean

default:"false"

Disable automatic slide width calculation. Allows slides to have custom widths defined via CSS.

$('.variable-width').slick({
  variableWidth: true,
  infinite: true
});

Grid Mode

rows

integer

default:"1"

Setting this to more than 1 initializes grid mode. Creates a grid layout with multiple rows.

slidesPerRow

integer

default:"1"

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

$('.grid-slider').slick({
  rows: 2,
  slidesPerRow: 3
});

Interaction Settings

draggable

boolean

default:"true"

Enable desktop mouse dragging.

swipe

boolean

default:"true"

Enable touch swipe gestures on mobile devices.

swipeToSlide

boolean

default:"false"

Allow swiping to any slide irrespective of slidesToScroll. When enabled, users can swipe directly to any slide.

touchMove

boolean

default:"true"

Enable slide movement with touch gestures.

touchThreshold

integer

default:"5"

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

edgeFriction

number

default:"0.35"

Resistance when swiping edges of non-infinite carousels. From source: default is 0.35 (not 0.15 as in some docs).

waitForAnimate

boolean

default:"true"

Ignore requests to advance the slide while currently animating.

Focus and Selection

focusOnSelect

boolean

default:"false"

Enable focus on selected element when clicked.

focusOnChange

boolean

default:"false"

Put focus on slide after change. Works with accessibility features.

Syncing Sliders

asNavFor

string

default:"null"

Enable syncing of multiple sliders. Accepts a jQuery selector for the target slider.

// Main slider
$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});

// Navigation slider
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  focusOnSelect: true
});

RTL Support

rtl

boolean

default:"false"

Change the slider’s direction to right-to-left for RTL languages.

Vertical Mode

vertical

boolean

default:"false"

Enable vertical slide direction.

verticalSwiping

boolean

default:"false"

Change swipe direction to vertical. Should be enabled when using vertical: true.

$('.vertical-slider').slick({
  vertical: true,
  verticalSwiping: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

Lazy Loading

lazyLoad

string

default:"ondemand"

Lazy load technique. Accepts 'ondemand' or 'progressive'.

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

<div class="slider lazy">
  <div><img data-lazy="img/slide1.jpg" /></div>
  <div><img data-lazy="img/slide2.jpg" /></div>
  <div><img data-lazy="img/slide3.jpg" /></div>
</div>

Custom Paging

customPaging

function

Custom paging template function. Receives the slider instance and index, returns a jQuery element for each dot.Default: function(slider, i) { return $('<button type="button"></button>').text(i + 1); }

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

Attachment Points

appendArrows

string | element

default:"$(element)"

Change where navigation arrows are attached. Accepts a selector, HTML string, array, element, or jQuery object.

appendDots

string | element

default:"$(element)"

Change where navigation dots are attached. Accepts a selector, HTML string, array, element, or jQuery object.

Z-Index

zIndex

number

default:"1000"

Set the z-index values for slides. Useful for IE9 and lower.

How Settings Work Together

Center Mode with Multiple Slides

When using centerMode with multiple slidesToShow, use odd numbers for best results:

$('.slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3
});

This creates a centered view with partial slides visible on both sides.

Fade Effect Limitations

The fade option only works properly with slidesToShow: 1:

$('.fade-slider').slick({
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  cssEase: 'ease-in-out'
});

Infinite Mode with Few Slides

When you have fewer slides than slidesToShow, infinite mode still works but behavior changes:

$('.few-slides').slick({
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1
  // Works even with only 3 slides
});

SwipeToSlide with SlidesToScroll

When swipeToSlide: true, it overrides the slidesToScroll setting:

$('.slider').slick({
  swipeToSlide: true,
  slidesToScroll: 3  // Ignored on swipe gestures
});

Common Configuration Patterns

Simple Image Gallery

$('.image-gallery').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear',
  adaptiveHeight: true
});

Product Carousel

$('.product-carousel').slick({
  slidesToShow: 4,
  slidesToScroll: 4,
  dots: true,
  infinite: true,
  speed: 300
});

Hero Slider with Autoplay

$('.hero-slider').slick({
  autoplay: true,
  autoplaySpeed: 5000,
  arrows: true,
  dots: true,
  fade: true,
  pauseOnHover: true,
  pauseOnFocus: true
});

Testimonial Slider

$('.testimonials').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  adaptiveHeight: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

Updating Settings Dynamically

You can change settings after initialization using the slickSetOption method:

// Change a single option
$('.slider').slick('slickSetOption', 'speed', 5000, true);

// Change multiple options
$('.slider').slick('slickSetOption', {
  speed: 1000,
  autoplay: false
}, true);

The third parameter (boolean) determines whether to refresh the UI after the change.

For responsive settings, see the Responsive Design documentation.

Best Practices

Performance Optimization

Enable lazyLoad for image-heavy carousels
Use waitForAnimate: true to prevent animation stacking
Consider disabling useCSS for complex animations on older browsers
Use useTransform: true for smoother hardware-accelerated animations

User Experience

Enable accessibility: true for keyboard navigation
Set pauseOnHover: true for autoplay sliders
Use adaptiveHeight: true when slide content varies in height
Provide custom arrow and dot styles for better visual feedback

Mobile Optimization

Enable swipe and touchMove for mobile devices
Adjust touchThreshold for swipe sensitivity
Consider using mobileFirst: true for responsive breakpoints
Test edgeFriction values for non-infinite carousels

Responsive Design - Configure breakpoint-specific settings
Accessibility - Accessibility-related configuration options
Settings Reference - Complete list of all settings
Methods - Control your slider programmatically
Events - Hook into slider events

Get Started

Core Concepts

Guides

Resources

Overview

Initialization

Basic Initialization

Data Attribute Initialization

Core Settings

Display Options

Navigation Controls

Animation Settings

Autoplay

Center Mode

Advanced Settings

Adaptive Height

Variable Width

Grid Mode

Interaction Settings

Focus and Selection

Syncing Sliders

RTL Support

Vertical Mode

Lazy Loading

Custom Paging

Attachment Points

Z-Index

How Settings Work Together

Common Configuration Patterns

Simple Image Gallery

Product Carousel

Hero Slider with Autoplay

Testimonial Slider

Updating Settings Dynamically

Best Practices

Performance Optimization

User Experience

Mobile Optimization

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Resources

​Overview

​Initialization

​Basic Initialization

​Data Attribute Initialization

​Core Settings

​Display Options

​Navigation Controls

​Animation Settings

​Autoplay

​Center Mode

​Advanced Settings

​Adaptive Height

​Variable Width

​Grid Mode

​Interaction Settings

​Focus and Selection

​Syncing Sliders

​RTL Support

​Vertical Mode

​Lazy Loading

​Custom Paging

​Attachment Points

​Z-Index

​How Settings Work Together

​Common Configuration Patterns

​Simple Image Gallery

​Product Carousel

​Hero Slider with Autoplay

​Testimonial Slider

​Updating Settings Dynamically

​Best Practices

Performance Optimization

User Experience

Mobile Optimization

​Related Configuration

Build docs developers (and LLMs) love

Overview

Initialization

Basic Initialization

Data Attribute Initialization

Core Settings

Display Options

Navigation Controls

Animation Settings

Autoplay

Center Mode

Advanced Settings

Adaptive Height

Variable Width

Grid Mode

Interaction Settings

Focus and Selection

Syncing Sliders

RTL Support

Vertical Mode

Lazy Loading

Custom Paging

Attachment Points

Z-Index

How Settings Work Together

Common Configuration Patterns

Simple Image Gallery

Product Carousel

Hero Slider with Autoplay

Testimonial Slider

Updating Settings Dynamically

Best Practices

Related Configuration