强制克隆幻灯片答案

【问题标题】：Force cloning slides in slick强制克隆幻灯片
【发布时间】：2018-10-04 06:57:50
【问题描述】：

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

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

问题是当幻灯片只有 3 张时，因为它停止了。我需要强制滑块克隆幻灯片，就好像我有 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/

【问题讨论】：

标签： javascript jquery css slider slick.js

【解决方案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
});

【讨论】：

是的，这就是我最终所做的，但是在响应中，最终项目会显示点，我不确定客户是否会接受该解决方案。交叉手指...谢谢！

【解决方案2】：

我的解决方案基于 Rohan 的回答：

在我的情况下，我有一个带有过滤器的滑块，当过滤的元素与要显示的元素相同时，无限不工作。当我在过滤时重置滑块时，我会将过滤后的元素与应该显示的元素进行比较，如果它们相等，我会复制这些元素。

$('.slider-productos').on('reInit', function(event, slick, currentSlide, nextSlide) {
    // total sliders number  -   get option slidesToShow number
    //            ^                    ^
    if (slick.slideCount === slick.options.slidesToShow) {

        // you can clone on slider or all, it depends on how many slider you want to show
        //var toClone = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
        var toClone1 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(1)');
        var toClone2 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
        var toClone3 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(3)');

        toClone1.clone().appendTo(".slider-productos .slick-track");
        toClone2.clone().appendTo(".slider-productos .slick-track");
        toClone3.clone().appendTo(".slider-productos .slick-track");

        // Set any option only for refresh slider                        refresh true
        //                            ^                                    ^
        $('.slider-productos').slick('slickSetOption', 'infinite', true, true);
    }

});

【讨论】：