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.
On Demand
Progressive
Anticipated
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>
Images load one after another on page load:$('.lazy').slick({
lazyLoad: 'progressive',
infinite: true
});
Preloads images in advance:$('.lazy').slick({
lazyLoad: 'anticipated',
slidesToShow: 3,
slidesToScroll: 1
});
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
});
Set vertical mode
Enable vertical: true in your configuration
Enable vertical swiping
Add verticalSwiping: true for touch support
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.