javascript - 在 slick 中强制克隆幻灯片

Question

我有一个我无法开发的需求。

我正在使用 slick 显示 3 张幻灯片，但只有中间一张显示了所有信息。我需要一个无限 slider 以使所有幻灯片都位于中心。

问题是幻灯片只有 3 张时，因为它停止了。我需要强制 slider 克隆幻灯片，就好像我有 4 张或更多幻灯片一样......

      $('.center').slick({
        centerMode: true,
        centerPadding: '0px',
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        focusOnSelect: true,
        adaptiveHeight: true

        });

在这里，我给你留了一个足够幻灯片的例子:https://jsfiddle.net/f580ys4b/1/

这里是一个只有 3 张幻灯片的例子:https://jsfiddle.net/f580ys4b/2/

Answer 1

在启动 Slick 之前，检查幻灯片元素的数量是否大于 slidesToShow。如果不是，请复制子项，直到幻灯片元素多于要显示的幻灯片为止。可以使用 jQuery 轻松完成。

var slideCount = jQuery(".slide").length;
if (slideCount <= 3) {
  // clone element
  jQuery(".center.slider").children().clone(true, true).appendTo(".center.slider");
}

jQuery('.center').slick({
  arrows: false,
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: false,
  focusOnSelect: true,
  adaptiveHeight: true
});