Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kenwheeler/slick/llms.txt

Use this file to discover all available pages before exploring further.

​
Center Mode

Center Mode displays the current slide in the center with partial views of previous and next slides. 
$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

centerMode

Enables centered view with partial prev/next slides

centerPadding

Side padding when in center mode (px or %)

​
Center Mode Example from Source

$('.center').slick({
  dots: true,
  infinite: true,
  centerMode: true,
  slidesToShow: 5,
  slidesToScroll: 3
});
Use center mode with odd numbered slidesToShow counts for best results.

​
Fade Transition

Create smooth fade transitions instead of sliding: 
$('.fade-slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

​
Fade Implementation Details

From slick.js:373-378, fade mode uses opacity transitions: 
if (_.options.fade === false) {
    transition[_.transitionType] = _.transformType + ' ' + _.options.speed + 'ms ' + _.options.cssEase;
} else {
    transition[_.transitionType] = 'opacity ' + _.options.speed + 'ms ' + _.options.cssEase;
}
When using fade mode, slidesToShow should be set to 1.

​
Lazy Loading

Slick supports two lazy loading techniques: ondemand and progressive.
Images load as you slide to them:
$('.lazy').slick({
  lazyLoad: 'ondemand',
  infinite: true
});

​
HTML Markup

<div class="lazy slider">
  <div>
    <img data-lazy="image1.jpg" />
  </div>
  <div>
    <img data-lazy="image2.jpg" />
  </div>
</div>

​
Responsive Images with srcset

<div class="lazy slider" data-sizes="50vw">
  <div>
    <img 
      data-lazy="image-350w.jpg" 
      data-srcset="image-650w.jpg 650w, image-960w.jpg 960w" 
      data-sizes="100vw"
    />
  </div>
</div>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  infinite: true
});
The data-sizes attribute can be inherited from the parent slider element.

​
Synced Sliders

Create synchronized carousels where one acts as navigation for another using asNavFor: 
// 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: true,
  centerMode: true,
  focusOnSelect: true
});

​
Complete Synced Example

<!-- Main Display -->
<div class="slider slider-for">
  <div><img src="product-1.jpg"></div>
  <div><img src="product-2.jpg"></div>
  <div><img src="product-3.jpg"></div>
  <div><img src="product-4.jpg"></div>
</div>

<!-- Thumbnail Navigation -->
<div class="slider slider-nav">
  <div><img src="thumb-1.jpg"></div>
  <div><img src="thumb-2.jpg"></div>
  <div><img src="thumb-3.jpg"></div>
  <div><img src="thumb-4.jpg"></div>
</div>

asNavFor

Syncs with another slider instance

focusOnSelect

Enables clicking on slides to navigate

​
Vertical Mode

Create vertical scrolling carousels: 
$('.vertical').slick({
  dots: true,
  vertical: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

​
Vertical with Center Mode

From the demo in index.html:336-340: 
$('.vertical-center').slick({
  dots: true,
  vertical: true,
  centerMode: true
});

​
Vertical Swiping

Enable vertical touch/drag: 
$('.vertical-slider').slick({
  vertical: true,
  verticalSwiping: true,
  slidesToShow: 4,
  slidesToScroll: 2
});
1

Set vertical mode

Enable vertical: true in your configuration
2

Enable vertical swiping

Add verticalSwiping: true for touch support
3

Adjust height

Ensure your container has a defined height for vertical scrolling

​
Grid Mode

Display slides in a grid layout using the rows and slidesPerRow options: 
$('.grid-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  rows: 2,
  slidesPerRow: 2
});

​
Grid Mode Implementation

From slick.js:559-597, Slick builds rows dynamically: 
if(_.options.rows > 0) {
    slidesPerSection = _.options.slidesPerRow * _.options.rows;
    numOfSlides = Math.ceil(originalSlides.length / slidesPerSection);

    for(a = 0; a < numOfSlides; a++){
        var slide = document.createElement('div');
        for(b = 0; b < _.options.rows; b++) {
            var row = document.createElement('div');
            for(c = 0; c < _.options.slidesPerRow; c++) {
                var target = (a * slidesPerSection + ((b * _.options.slidesPerRow) + c));
                if (originalSlides.get(target)) {
                    row.appendChild(originalSlides.get(target));
                }
            }
            slide.appendChild(row);
        }
        newSlides.appendChild(slide);
    }
}

rows

Number of rows in grid mode

slidesPerRow

Number of slides per row

​
Variable Width

Allow slides to have different widths: 
$('.variable').slick({
  dots: true,
  infinite: true,
  variableWidth: true
});

​
Variable Width HTML

From index.html:268-287: 
<section class="variable slider">
  <div><img src="https://placehold.co/350x300?text=1"></div>
  <div><img src="https://placehold.co/200x300?text=2"></div>
  <div><img src="https://placehold.co/100x300?text=3"></div>
  <div><img src="https://placehold.co/200x300?text=4"></div>
  <div><img src="https://placehold.co/350x300?text=5"></div>
  <div><img src="https://placehold.co/300x300?text=6"></div>
</section>
When using variableWidth, you need to set explicit widths on your slides via CSS.

​
Adaptive Height

Automatically adjust slider height to match current slide: 
$('.adaptive-slider').slick({
  adaptiveHeight: true,
  slidesToShow: 1
});

​
Implementation Detail

From slick.js:251-259: 
Slick.prototype.animateHeight = function() {
    var _ = this;
    if (_.options.slidesToShow === 1 && _.options.adaptiveHeight === true && _.options.vertical === false) {
        var targetHeight = _.$slides.eq(_.currentSlide).outerHeight(true);
        _.$list.animate({
            height: targetHeight
        }, _.options.speed);
    }
};
adaptiveHeight only works when slidesToShow is set to 1 and vertical is false.

​
RTL (Right-to-Left) Support

Enable right-to-left scrolling for RTL languages: 
$('.rtl-slider').slick({
  rtl: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

​
Edge Friction

Control resistance when swiping edges of non-infinite carousels: 
$('.slider').slick({
  infinite: false,
  edgeFriction: 0.15  // default value
});
Lower values create more resistance. Set to 0 for no swiping past edges.

​
Advanced Autoplay Control

Fine-tune autoplay behavior: 
$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 3000,
  pauseOnHover: true,
  pauseOnFocus: true,
  pauseOnDotsHover: false
});

​
Programmatic Control

// Pause autoplay
$('.slider').slick('slickPause');

// Start autoplay
$('.slider').slick('slickPlay');

​
Swipe to Slide

Allow swiping to any slide regardless of slidesToScroll: 
$('.slider').slick({
  swipeToSlide: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
This enables more natural touch interaction by allowing users to swipe to any visible slide.

Build docs developers (and LLMs) love

Get started for freeTalk to us