无限自动轮播（Carousel）无法正常循环：最后一张图后出现空白间隙

问题描述 #

开发的无限自动轮播（Carousel）播放完最后一张图片后，无法无缝切换回第一张图。当前共5张图片，播放到最后一张后会出现大片空白区域，间隔数秒才回到第一张图。尝试修改动画时长和slide-track的宽度，问题未解决。

原代码如下：

原CSS代码 #

/* Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7))}
}

/* Styling */.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 300px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 1000px; 
}

.slider::before,
    .slider::after {
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .slider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider::before {
        left: 0;
        top: 0;
    }

    .slide-track {
        animation: scroll linear infinite;
        animation-duration: 30s;
        display: flex;
        width: calc(250px 14);
    }

    .slide {
        height: 200px;
        width: 250px;
        margin-right: 90px;
    }

原HTML代码 #

<div class="slider">
    <div class="slide-track">
        <div class="slide">
            <img src="img/ran.png" alt="" >
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png" alt="" />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png"  alt=""  />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png" alt=""  />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png"  alt="" />
            <p>random name</p>
        </div>
    </div>
</div>

修复方案 #

要实现无缝滚动，核心是让轮播轨道包含两份完全相同的轮播项，并调整动画位移距离与轨道宽度匹配，让动画结束时视觉上刚好衔接起始状态。具体修改如下：

1. 复制轮播项（HTML修改） #

在slide-track内复制一份原有的5个slide，总数量变为10个，确保滚动到后半段时视觉上能衔接前半段：

<div class="slider">
    <div class="slide-track">
        <!-- 原轮播项 -->
        <div class="slide">
            <img src="img/ran.png" alt="" >
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png" alt="" />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png"  alt=""  />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png" alt=""  />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png"  alt="" />
            <p>random name</p>
        </div>
        <!-- 复制的轮播项 -->
        <div class="slide">
            <img src="img/ran.png" alt="" >
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png" alt="" />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png"  alt=""  />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png" alt=""  />
            <p>random name</p>
        </div>
        <div class="slide">
            <img src="img/ran.png"  alt="" />
            <p>random name</p>
        </div>
    </div>
</div>

2. 修正CSS计算错误与动画参数 #

• 修复slide-track的宽度计算：每个slide实际占用宽度为250px（自身宽度） + 90px（margin-right）= 340px，10个slide总宽度应为calc(340px * 10)
• 修正动画位移量：向左滚动5个slide的总宽度（即原轮播项的总宽度），动画结束时复制的轮播项刚好衔接原轮播项的起始位置，实现无缝循环
• 修复原代码中calc(250px 14)的语法错误（缺少乘号）

/* Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    /* 滚动距离为5个slide的总宽度：340px * 5 */
    100% { transform: translateX(calc(-340px * 5))}
}

/* Styling */
.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 300px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: 1000px; 
}

.slider::before,
.slider::after {
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slide-track {
    animation: scroll linear infinite;
    animation-duration: 30s;
    display: flex;
    /* 10个slide的总宽度：340px * 10 */
    width: calc(340px * 10);
}

.slide {
    height: 200px;
    width: 250px;
    margin-right: 90px;
}

关键说明 #

• 原动画位移量和轨道宽度的计算未考虑slide的margin，导致滚动距离与实际内容不匹配，出现空白
• 复制轮播项后，动画滚动到原轮播项末尾时，复制的内容会紧接着显示，视觉上形成无缝循环
• 后续若修改slide的宽度或margin，需同步调整slide-track宽度和动画位移量，保持数值匹配

内容的提问来源于stack exchange，提问作者Ya Hui Tan