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

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

• javascript
• jquery
• html
• css
• slick.js

2 Answers 2

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

If I'm understanding your question correctly, you're going to have to programmatically hide the partial slides. It would have been great if this functionality existed natively, but it doesn't. Maybe in a future release.

Please read the ments for a brief outline of what I'm doing:

function setSlideVisibility() {
  //Find the visible slides i.e. where aria-hidden="false"
  var visibleSlides = $('.slider-nav > .slick-list > .slick-track > .slick-slide[aria-hidden="false"]');
  //Make sure all of the visible slides have an opacity of 1
  $(visibleSlides).each(function() {
    $(this).css('opacity', 1);
    console.log($(this).html());
  });
  //Set the opacity of the first and last partial slides.
  $(visibleSlides).first().prev().css('opacity', 0);
  $(visibleSlides).last().next().css('opacity', 0);
}

//Execute the function to apply the visibility on dom ready.
$(setSlideVisibility());

//Re-apply the visibility in the beforeChange event.
$('.slider-nav').on('beforeChange', function() {
  $('.slick-slide').each(function() {
    $(this).css('opacity', 1);
  });
});

//After the slide change has pleted, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
  setSlideVisibility();
});

Fiddle Demo