Question

我有无法开发的需求。

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

问题是当幻灯片只有3张时，因为它停止了。我需要迫使滑块将幻灯片克隆，就像我有4张或更多张幻灯片一样。

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

        });

在这里，我为您提供一个幻灯片示例：OTP 21 Highlights

下面是一个只有3张幻灯片的示例：https://jsfiddle.net/f580ys4b/1/

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
});

Answer 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);
    }

});

强制克隆幻灯片

2 个答案: