在 slick.js 中显示 3 张幻灯片的活动幻灯片居中

Question

我正在使用 slick.js 插件，我想在他们的网站上制作类似的东西。这里是 DEMO.

问题是，第一张活动幻灯片 1 未居中。我知道我可以使用

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

但不是 3 张幻灯片，还有另外 2 张幻灯片的部分内容，请参阅 HERE

Answer 1

如果我没有正确理解你的问题，你将不得不以编程方式隐藏部分幻灯片。如果这个功能本身就存在，那就太好了，但事实并非如此。也许在未来的版本中。

请阅读评论以简要了解我在做什么：

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

Answer 2

嗯，这太尴尬了。它所需要的只是将选项 centerPadding 设置为 0（除了将 centerMode 设置为 true 之外）。我不知道为什么我以前没见过这个。不管怎样，这是我 1 个月的更新：

WORKING DEMO

在 slick.js 中显示 3 张幻灯片的活动幻灯片居中

Center active slide with showing 3 slides in slick.js

html

javascript

css

jquery

slick.js