Configuration

Learn how to configure Slick Carousel with initialization options, settings, and best practices for customizing your slider behavior.

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.

Navigation Controls

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

Related Configuration

• 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