Повторите содержание в jQuery Slick

Question

Мне нужно отображать динамически добавляемый контент с помощью карусели jQuery Slick. Мин и Макс Я должен отобразить 6 контента на слайде. Если контент меньше 6, он должен повторять тот же контент. Например, если есть slideToShow:6, но если есть только 4 содержимого. Следует повторить 1-й и 2-й контент в последнем. Я не могу найти метод в пятно для повторения.

$('.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>