轮播滑块仅存在1篇文章时左右出现重复内容，如何删除多余克隆项？

解决方法 #

你遇到的问题是轮播为了实现无限滚动效果，默认会在首尾各克隆1份幻灯片内容，当只有1篇文章时，克隆后就会出现3份重复内容。只需要在JS初始化逻辑里增加单篇内容的特殊判断即可，修改后代码如下：

修改后的JS核心逻辑 #

在initSlider函数最开头，拿到slidesLength后新增单篇内容判断：

function initSlider(slider, sliderRow, slides) {
    const slidesLength = slides.length;
    // 新增：只有1篇文章时直接退出轮播逻辑，不生成克隆
    if (slidesLength <= 1) {
        const slideWidth = slider.offsetWidth
        slides[0].style.width = slideWidth + 'px'
        sliderRow.style.width = slideWidth + 'px'
        sliderRow.style.transform = 'translateX(0)'
        slides[0].classList.add('active')
        // 监听窗口大小变化适配宽度
        window.addEventListener('resize', () => {
            const newWidth = slider.offsetWidth
            slides[0].style.width = newWidth + 'px'
            sliderRow.style.width = newWidth + 'px'
        })
        return
    }
    // 下面保留你原来的所有逻辑不变
    let allowShift = true;
    const CLONES_COUNT = 1;
    // ... 其余原有代码保持不动
}

说明 #

• 当检测到幻灯片数量<=1时，不会执行首尾克隆的逻辑，也不会绑定轮播切换、自动播放相关的事件，自然不会出现重复内容
• 保留了窗口大小变化的宽度适配，保证单篇内容在不同设备上展示正常
• 你已经实现的单篇时隐藏箭头的逻辑不需要改动，二者可以完美兼容

内容的提问来源于stack exchange，提问作者chu