如何自动复制Slick幻灯片？解决数量不足导致的宽度异常

问题描述 #

我用slick-list构建了支持用户自定义插入幻灯片的组件，滑块预设展示4张幻灯片，但当幻灯片数量不足时，会出现幻灯片宽度异常缩小的问题。我尝试设置infinite:true但未达到预期效果，当前Slick配置代码如下：

$('.el-lista-slider-orcamento .itens').each(function(){
      $(this).slick({
        slidesToShow: 4
        ,infinite: true
        ,slidesToScroll: 1
        ,autoplay: false
        ,autoplaySpeed: 4000
        ,speed: 500
        ,easing: 'swing'
        ,swipeToSlide: true
        ,pauseOnHover: false
        ,pauseOnFocus: false
        ,adaptiveHeight: true
        ,prevArrow: $(".el-lista-slider-orcamento .setas .seta-anterior")
        ,nextArrow: $(".el-lista-slider-orcamento .setas .seta-proximo")
        ,responsive: [
            {
                breakpoint: 1280
                ,settings: {
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 768
                ,settings: {
                    slidesToShow: 1
                }
            }
        ]
    });
})

请问是否可以自动复制幻灯片，使总数至少达到5张（4+1）？此前设置infinite:true时，未出现他人反馈的自动复制幻灯片现象。

解决方案 #

可以通过初始化Slick前手动复制幻灯片的方式解决该问题，具体实现步骤如下：

1. 遍历每个滑块容器，先统计当前幻灯片的数量
2. 如果数量小于预设的slidesToShow + 1（即5张），则复制现有幻灯片直到总数达标
3. 完成复制后再初始化Slick组件

修改后的代码如下：

$('.el-lista-slider-orcamento .itens').each(function(){
    const $slider = $(this);
    const slides = $slider.children();
    const slidesToShow = 4; // 对应预设的展示数量
    const minSlides = slidesToShow + 1; // 最少需要5张

    // 复制幻灯片直到数量达标
    if (slides.length < minSlides) {
        let needed = minSlides - slides.length;
        for (let i = 0; i < needed; i++) {
            // 循环复制现有幻灯片，保持内容连贯性
            $slider.append(slides.eq(i % slides.length).clone());
        }
    }

    // 初始化Slick
    $slider.slick({
        slidesToShow: 4
        ,infinite: true
        ,slidesToScroll: 1
        ,autoplay: false
        ,autoplaySpeed: 4000
        ,speed: 500
        ,easing: 'swing'
        ,swipeToSlide: true
        ,pauseOnHover: false
        ,pauseOnFocus: false
        ,adaptiveHeight: true
        ,prevArrow: $(".el-lista-slider-orcamento .setas .seta-anterior")
        ,nextArrow: $(".el-lista-slider-orcamento .setas .seta-proximo")
        ,responsive: [
            {
                breakpoint: 1280
                ,settings: {
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 768
                ,settings: {
                    slidesToShow: 1
                }
            }
        ]
    });
})

补充说明 #

• Slick的infinite: true自动复制幻灯片的前提是现有幻灯片数量大于等于slidesToShow，如果数量不足，它不会触发自动复制逻辑，这就是之前未出现预期效果的原因。
• 用i % slides.length循环复制现有幻灯片，可避免仅重复最后一张幻灯片的生硬效果。
• 移动端slidesToShow:1时单张幻灯片即可正常显示，因此主要针对桌面端的数量不足问题处理即可。

内容的提问来源于stack exchange，提问作者aurelio-sc