重复JQuery Slick中的内容

Question

我必须使用jQuery lick旋转木马的动态添加内容。最小和最大我必须在幻灯片中显示6个内容。如果内容小于6，则应重复相同的内容。例如，如果slideToShow:6，但如果只有4个内容。它应该在最后一个内容中重复第一和第二个内容。我找不到光滑重复的方法。

$('.example').slick({
  infinite: true,
  slidesToShow: 6,
  slidesToScroll: 1,
  arrows: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
      }
    }
  ]
});

Answer 1

一个简单的循环/克隆将完成技巧：

<ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
        var slidesToShow = 6;
        var slideWrapper = $("ul");
        var slides = $("li");
        var totalSlides = slides.length;
        if (totalSlides > 0 && totalSlides < slidesToShow) {
            // Calculate how many additional elements are required
            var diff = slidesToShow - totalSlides;
            // Start cloning from position [0]
            var slideToClone = 0;
            for (var i = 0; i < diff; i++) {
                // Ensure the element about to be cloned exists
                if (slideToClone >= slides.length) {
                    slideToClone = 0;
                }
                // Clone/append slide
                slides.eq(slideToClone).clone().appendTo(slideWrapper);
                // Increment iterator to copy next slide
                slideToClone++;
            }
        }
        // Finally, initialise slick
        // slideWrapper.slick();
    })
</script>