轮播图容器必须设 overflow: hidden 且配合 position: relative；图片宽度需统一并基于像素或百分比精确计算；动画关键帧须包含停留段；响应式下应使用 vw 单位并调整动画时长。
轮播图容器必须设 overflow: hidden
这是纯 CSS 轮播能“只显示一张图”的前提。不加这行，所有图片会直接横向铺满页面，根本看不出轮播效果。
常见错误是只设了 width 和 height，但忘了隐藏溢出内容。一旦漏掉，transform: translateX() 再准也没用——用户能看到全部图片挤在一行里。
-
.carousel容器需同时设置position: relative（方便内部绝对定位控制或伪元素定位） - 若用 Flex 布局，
.carousel-slide要设display: flex且flex-wrap: nowrap - 若用 Grid，避免用
auto-fit配合minmax()做轮播主轴——它会换行，破坏单行滑动逻辑
图片宽度必须统一且可计算
轮播依赖精确的位移值：translateX(-400px) 或 translateX(-100%) 都得基于“单张图占多少空间”来定。算错就跳帧、卡顿、最后一张闪一下又回开头。
两种主流方式：
立即学习“前端免费学习笔记（深入）”；
- 固定像素：所有
img设死宽高（如width: 600px; height: 400px），父容器.carousel-slide宽度 = 图片数 × 单图宽度 - 百分比：每张图设
flex: 0 0 100%，父容器width: 300%（3 张图），动画中用translateX(-33.33%)切换
别混用：比如图片用 width: 100% 但父容器没设固定宽，浏览器无法解析百分比位移基准，动画会失效或抖动。
动画关键帧里必须有“停留段”
纯 CSS 轮播不是匀速滑过三张图，而是“停→切→停→切”。如果 @keyframes 只写 0%, 33%, 66%, 100% 四个点且全是 translateX 变化，人眼会看到快速抽帧，像幻灯片翻页，没有“当前图稳住”的感知。
正确做法是每个状态维持至少 10%～15% 的时间窗口：
- 0% → 25%：第一张图停留
- 26% → 27%：瞬间位移到第二张位置（触发切换）
- 28% → 52%：第二张图停留
- 依此类推
例如 3 张图总时长 9s，每张应停留约 3s，中间留 0.3s 切换——否则容易在 Safari 或旧版 Chrome 里出现“闪白”或跳图。
响应式下要重算 translate 值和动画时长
用像素位移（如 translateX(-600px)）在移动端一缩放就错位；用百分比（如 translateX(-100%)）虽适配，但动画时长不变会导致小屏上切换太快、大屏上太慢。
- 推荐方案：用
vw或视口单位定义容器宽，再配合translateX(-100vw)，比百分比更稳 - 媒体查询里调整
animation-duration：手机端可延长到 12s，桌面端保持 9s - 慎用
object-fit: cover+height: 100%组合——某些安卓 WebView 会把高度算成 0，导致图片塌陷
真正难的不是写出来，是让 translateX 值、animation-duration、overflow 三者在不同设备上始终对齐。调一次可能行，换台手机就偏移半张图——得靠真机反复测。
