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

Question

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

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

我已经尝试设置centerMode为false. 不会有多余的幻灯片，但所选幻灯片将位于最左侧。因此，它为我设定的是很重要的centerMode对true，因为我想在中心选定的幻灯片。

对不起，我的英语不好。

任何帮助将不胜感激。

谢谢

Answer 1

您可以创建一个方法，将opacityof0应用于出现在第一张幻灯片之前的幻灯片以及出现在最后一张幻灯片之后的幻灯片（即部分幻灯片）。您可以在滑块初始化后以及每次通过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();
});

小提琴演示