Question

我必须使用jQuery Slick轮播显示动态添加的内容。最小值和最大值我必须在幻灯片中显示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

一个简单的for循环/克隆就可以解决问题：

<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>

在jQuery Slick中重复内容

1 个答案: