CSS 如何实现无缝轮播图？

Question

CSS 如何实现无缝轮播图？

仓乃文 · Accepted Answer

无缝轮播图通过 scroll-snap 和 overflow 实现纯 CSS 的轮播效果，配合 scroll-behavior: smooth 实现平滑滚动。

```css
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
```

自动播放 + 无限循环（需配合 JS 或复制首尾元素）：
```css
@keyframes carousel-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-300%); }
}

.carousel-auto {
  animation: carousel-scroll 10s infinite linear;
}
```

补充说明：
- scroll-snap-type: x mandatory 强制每次滚动停在一个 item 上
- scroll-snap-align: start 对齐到容器起始位置
- 隐藏滚动条让轮播更美观
- 无限循环需复制首尾元素，动画到末尾时无缝跳回首位置