极简无缝轮播组件(无克隆版本)

1
第一张幻灯片内容
2
第二张幻灯片内容
3
第三张幻灯片内容
4
第四张幻灯片内容
5
第五张幻灯片内容

配置选项

3
// 轮播组件核心逻辑(无DOM克隆版本)
function tinySlider(root) {
    // 初始化变量和配置
    const wr = root.querySelector('.swiper-wrapper');
    const autoplay = root.dataset.autoplay === '1';
    const loop = root.dataset.loop === '1';
    const delay = +root.dataset.delay || 5000;
    
    // 计算列数和幻灯片数量
    let items = parseInt(getComputedStyle(wr).getPropertyValue('--cols')) || 1;
    const slides = [...wr.children];
    const realLen = slides.length;
    
    // 核心函数:基于索引计算实现无缝循环
    function getNormalizedIndex(index) {
        if (loop) {
            // 循环模式下使用模运算实现无缝循环
            return (index % realLen + realLen) % realLen;
        } else {
            // 非循环模式下限制在有效范围内
            return Math.max(0, Math.min(index, realLen - items));
        }
    }
    
    // 更多实现细节...
}