Slick JS 在使用无限居中模式幻灯片时在左侧添加 space

Question

我正在尝试使用 Slick JS 制作一个滑块，其中幻灯片无限循环，但同时可见。我创建了一个 codepen 来展示演示。如果您与演示进行交互，您会发现一回到幻灯片 1，幻灯片 1 左侧的幻灯片就消失了，除了 5,6 ...

谁能帮我解决这个问题？

    $(".customslider-1").slick({ 
      dots: true,
      infinite: true,
      speed:300,
      slidesToScroll: 1,
      centerMode: true,
      centerPadding:'0',
      variableWidth: true, 
      arrows: false,
      focusOnSelect: true,
    });

Answer 1

我经常看到在没有设置 slidesToShow 的情况下使用 centerMode 的奇怪现象。设置 slidesToShow: 5 在你的 CodePen 中为我解决了这个问题。

$(".customslider-1").slick({ 
  dots: true,
  infinite: true,
  speed:300,
  slidesToScroll: 1,
  slidesToShow: 5,
  centerMode: true,
  centerPadding: 0,
  variableWidth: true, 
  arrows: false,
  focusOnSelect: true,
});

Slick JS 在使用无限居中模式幻灯片时在左侧添加 space

Slick JS adding space on left side when using infinite, center mode slideshow

javascript

slick.js