Svelte中实现双向无限Slider组件遇到的滑动异常问题

核心问题分析 #

你的代码存在几个关键错误导致prev按钮失效：

• 滑块的transform计算错误，没有使用slidesToScroll变量，导致滚动位置不更新
• childWidth的计算公式逻辑错误，无法正确计算每个滑块项的宽度
• prev按钮的数组追加逻辑和位置判断条件错误，导致slidesToScroll出现负值
• 初始数组克隆和定位逻辑不合理，没有为双向滚动打好基础

修正后的代码 #

<script>
    import { onMount } from 'svelte';
    let slider;
    export let slidesToShow = 4;
    export let array = [];
    // 保存原始数组，用于后续无限追加
    const originalArray = [...array];
    // 初始数组：原始数组前后各复制一次，实现初始双向滚动空间
    let displayArray = [...originalArray, ...originalArray, ...originalArray];
    let gap = 0;
    // 初始滚动位置定位到中间的原始数组起始处
    let slidesToScroll = originalArray.length;
    let childWidth;
    let sliderWidth;

    onMount(() => {
        initSlider();
    });

    const initSlider = () => {
        const style = getComputedStyle(slider);
        gap = parseInt(style.gap) || 0;
        sliderWidth = slider.clientWidth;
        // 正确计算每个滑块项的宽度：总宽度减去间隙总和，再平分给每个项
        childWidth = (sliderWidth - gap * (slidesToShow - 1)) / slidesToShow;
    };

    const nextItem = () => {
        slidesToScroll++;
        // 当滚动到接近末尾的原始数组位置时，追加原始数组到末尾，并重置滚动位置（视觉上无感知）
        if (slidesToScroll >= displayArray.length - originalArray.length) {
            displayArray = [...displayArray, ...originalArray];
        }
    };

    const prevItem = () => {
        slidesToScroll--;
        // 当滚动到接近开头的原始数组位置时，在开头追加原始数组，同时调整滚动位置，避免负值
        if (slidesToScroll < originalArray.length) {
            displayArray = [...originalArray, ...displayArray];
            // 滚动位置增加原始数组长度，保持视觉位置不变
            slidesToScroll += originalArray.length;
        }
    };
</script>

<svelte:window on:resize={initSlider} />

<div class="grid grid-cols-slider gap-4 place-items-center w-full h-full">
    <button on:click={prevItem}>
        <img src="static/images/icons-png/left-arrow.png" class="w-full h-full" alt="上一页" />
    </button>
    <div id="slider" style="overflow: hidden;">
        <div
            style="transform: translateX(-{(childWidth + gap) * slidesToScroll}px); transition: transform 0.3s ease;"
            id="slider-container"
            bind:this={slider}
            class="flex"
        >
            {#each displayArray as item, index}
                <div class="child" style="width: {childWidth}px;">
                    <img
                        src="static/images/icons-png/casio06.png"
                        alt="滑块图片"
                        class="w-full h-full object-cover"
                    />
                    <div class="bg-red-500">item {item}</div>
                </div>
            {/each}
        </div>
    </div>
    <button on:click={nextItem}>
        <img src="static/images/icons-png/right-arrow.png" class="w-full h-full" alt="下一页" />
    </button>
</div>

关键修改说明 #

1. 数组结构优化：
   • 保存originalArray作为原始数据源，避免重复克隆混乱
   • 初始displayArray为原始数组的三次复制（前+中+后），给双向滚动预留初始空间
2. 滚动位置计算修复：
   • 初始slidesToScroll设置为originalArray.length，定位到中间的原始数组起始位置
   • transform使用slidesToScroll变量，确保滚动位置随按钮点击更新
3. 宽度计算修正：
   • 正确计算childWidth：总宽度减去所有间隙（slidesToShow-1个间隙）后平分给每个滑块项
4. 无限滚动逻辑调整：
   • next按钮：当滚动到接近末尾的原始数组区域时，追加原始数组到displayArray末尾，无需调整滚动位置
   • prev按钮：当滚动到接近开头的原始数组区域时，在displayArray开头追加原始数组，同时将slidesToScroll增加原始数组长度，保证视觉上无缝衔接，避免负值
5. 样式补充：
   • 给滑块容器添加flex布局，确保滑块项横向排列
   • 添加transition实现平滑滚动效果
   • 给外层#slider添加overflow: hidden，隐藏超出部分

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