Slick Carousel - centerMode 没有多余的幻灯片

Question

我想制作幻灯片（使用 Slick.js），根据图片，我想制作 centerMode:true 和 focusOnSelect:true...

但问题是会有两个多余的幻灯片（左和右）。如何删除它们？

我已经尝试将 centerMode 设置为 false。不会有多余的幻灯片，但选中的幻灯片会在最左边。所以将 centerMode 设置为 true 对我来说很重要，因为我想让选定的幻灯片居中。

抱歉我的英语不好。

我们将不胜感激。

谢谢

Answer 1

您可以创建一种方法，将 opacity 或 0 应用于出现在第一张幻灯片之前的幻灯片以及出现在最后一张幻灯片之后的幻灯片，即部分幻灯片。您可以在滑块初始化后以及每次通过 afterChange 事件更改幻灯片后调用此方法：

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

$(setSlideVisibility());

$('.slider').on('afterChange', function() { 
  setSlideVisibility();
});

Fiddle Demo

Answer 2

我有一个更简单的解决方案。仅在中心模式下工作。

.slick-slide {
  opacity: 0;
}
.slick-slide.slick-center {
  opacity: 1;
}

Slick Carousel - centerMode 没有多余的幻灯片

Slick Carousel - centerMode without excess slides

javascript

slide

slick.js