Animated Image Slider无法实现终点无缝循环滚动，求解决方法

解决无缝滚动问题的步骤 #

1. 添加容器并隐藏溢出
   在<ul>外层包裹容器，用来隐藏超出视口的内容，避免显示重复图片。
2. 复制图片列表
   在原有10张图片后，复制完全相同的10张图片。当第一组图片滚动出视野时，第二组（和第一组一致）会紧跟其后，实现视觉无缝衔接。
3. 调整动画关键帧
   列表宽度变为原来的2倍，动画需将列表向左移动自身宽度的50%，此时第二组图片刚好处于第一组初始位置，循环时不会出现跳跃。
4. 修复布局细节
   移除列表和列表项的默认边距、内边距，设置flex-wrap: nowrap确保图片单行排列，flex-shrink: 0防止图片被压缩。

修改后的HTML

<div class="slider-container">
  <ul>
    <li>
      1<img src="https://picsum.photos/400/600?random=1" width="400" height="600" alt="">                    
    </li>
    <li>
      2<img src="https://picsum.photos/400/600?random=2" width="400" height="600" alt="">                    
    </li>
    <li>
      3<img src="https://picsum.photos/400/600?random=3" width="400" height="600" alt="">                    
    </li>
    <li>
      4<img src="https://picsum.photos/400/600?random=4" width="400" height="600" alt="">                    
    </li>
    <li>
      5<img src="https://picsum.photos/400/600?random=5" width="400" height="600" alt="">                    
    </li>
    <li>
      6<img src="https://picsum.photos/400/600?random=6" width="400" height="600" alt="">                    
    </li>
    <li>
      7<img src="https://picsum.photos/400/600?random=7" width="400" height="600" alt="">                    
    </li>
    <li>
      8<img src="https://picsum.photos/400/600?random=8" width="400" height="600" alt="">                    
    </li>
    <li>
      9<img src="https://picsum.photos/400/600?random=9" width="400" height="600" alt="">                    
    </li>
    <li>
      10<img src="https://picsum.photos/400/600?random=10" width="400" height="600" alt="">                    
    </li>
    <!-- 复制的10张图片 -->
    <li>
      1<img src="https://picsum.photos/400/600?random=1" width="400" height="600" alt="">                    
    </li>
    <li>
      2<img src="https://picsum.photos/400/600?random=2" width="400" height="600" alt="">                    
    </li>
    <li>
      3<img src="https://picsum.photos/400/600?random=3" width="400" height="600" alt="">                    
    </li>
    <li>
      4<img src="https://picsum.photos/400/600?random=4" width="400" height="600" alt="">                    
    </li>
    <li>
      5<img src="https://picsum.photos/400/600?random=5" width="400" height="600" alt="">                    
    </li>
    <li>
      6<img src="https://picsum.photos/400/600?random=6" width="400" height="600" alt="">                    
    </li>
    <li>
      7<img src="https://picsum.photos/400/600?random=7" width="400" height="600" alt="">                    
    </li>
    <li>
      8<img src="https://picsum.photos/400/600?random=8" width="400" height="600" alt="">                    
    </li>
    <li>
      9<img src="https://picsum.photos/400/600?random=9" width="400" height="600" alt="">                    
    </li>
    <li>
      10<img src="https://picsum.photos/400/600?random=10" width="400" height="600" alt="">                    
    </li>
  </ul>
</div>

修改后的CSS

:root{
    --t: 10s;
}

.slider-container {
  overflow: hidden;
}

ul{
    animation: move var(--t) linear infinite;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
            
ul:hover{
    animation-play-state: paused;
}

li {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

原理说明 #

复制图片后列表总宽度翻倍，动画将列表左移自身宽度的50%，此时第二组图片完全替代第一组位置。由于动画无限循环，且两组图片完全一致，用户无法察觉循环时的位置重置，从而实现无缝滚动。

学习资源推荐 #

• MDN文档：系统学习CSS动画（CSS Animations）和Flexbox布局的基础语法与属性。
• CSS Tricks：搜索“infinite image slider”获取实战教程与技巧解析。

内容的提问来源于stack exchange，提问作者Md. Rakibul Islam