Skip to content
Advertisement

Center active slide with showing 3 slides in slick.js

I’m using slick.js plugin and I want to make something like on their website. Here is DEMO.

Problem is, that first active slide 1 is not centered. I know I can use

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

but then there are not 3 slides, but also parts of another 2 slides, see HERE

Answer

Well, this is so embarrassing. All it needs to have is set option centerPadding to 0 (beside setting centerMode to true). I don’t know why I haven’t seen this before. Anyway, here is my 1-month update:

WORKING DEMO

Advertisement