如何实现无缝无限轮播？现有轮播动画结束后出现空白区域

问题核心原因 #

你当前的实现有两个关键问题导致空白：

1. 轮播容器内的内容并非完全两组重复的元素，滚动到-50%时，后半部分内容无法和前半部分无缝衔接；
2. 图片使用百分比宽度+margin的组合，导致容器总宽度计算不稳定，translateX(-50%)无法精准对应到两组内容的切换点。

修复方案 #

步骤1：确保容器内是完全两组重复内容 #

把原始的轮播元素完整复制一遍，让.slider-items里包含两组完全相同的图片序列，这样滚动到一半时，第二组的开头刚好和第一组的结尾匹配。

步骤2：调整CSS，稳定容器宽度与动画逻辑 #

修改CSS，固定图片尺寸、避免元素压缩，并优化间距计算：

.slider {
    padding-top: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.slider-items {
    display: flex;
    flex-wrap: nowrap; /* 强制内容在一行，不换行 */
    justify-content: flex-start; /* 改为左对齐，避免居中导致滚动偏差 */
    align-items: center;
    gap: 40px; /* 仅用gap控制元素间距，去掉图片的左右margin */
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%); /* 容器是两组内容，滚动一半刚好衔接 */
    }
}

.slider-items img {
    width: 120px; /* 改用固定宽度，避免百分比导致的宽度波动 */
    flex-shrink: 0; /* 禁止图片被压缩，保证宽度稳定 */
    filter: grayscale(100%);
    margin: 40px 0; /* 仅保留上下margin，左右间距用gap控制 */
}

步骤3：更新HTML结构 #

替换为两组完全重复的图片：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div className="slider pb-12">
  <div className="slider-items">
    <!-- 第一组内容 -->
    <img src="https://picsum.photos/id/237/200/300" alt="" />
    <img src="https://picsum.photos/seed/picsum/200/300" alt="" />
    <img src="https://picsum.photos/200/300?grayscale" alt="" />
    <img src="https://picsum.photos/200/300/?blur" alt="" />
    <img src="https://picsum.photos/200/300.jpg" alt="" />
    <!-- 第二组完全重复的内容 -->
    <img src="https://picsum.photos/id/237/200/300" alt="" />
    <img src="https://picsum.photos/seed/picsum/200/300" alt="" />
    <img src="https://picsum.photos/200/300?grayscale" alt="" />
    <img src="https://picsum.photos/200/300/?blur" alt="" />
    <img src="https://picsum.photos/200/300.jpg" alt="" />
  </div>
</div>

原理说明 #

• 两组完全重复的内容：保证translateX(-50%)时，第二组内容刚好填补第一组滚出的区域，视觉上无断点；
• flex-shrink:0：防止图片在容器宽度变化时被压缩，确保总宽度稳定为两组内容的宽度之和；
• 统一用gap控制间距：避免margin和gap叠加导致的间距计算误差，让容器总宽度更易预测。

内容的提问来源于stack exchange，提问作者Rocio Garcia Lofrano