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

回答1:

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 comments 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 completed, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
  setSlideVisibility();
});

Fiddle Demo

回答2:

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

WORKING DEMO

来源：https://stackoverflow.com/questions/37006909/center-active-slide-with-showing-3-slides-in-slick-js

标签

javascript

jquery

html

css

slick.js