overflow: hidden 必须加在最外层 .carousel 容器上，配合固定宽高实现裁剪；图片需等宽紧密排列，位移值按索引×单图宽动态计算；无缝循环需克隆首尾图并分离逻辑索引与 dom 索引。
overflow: hidden 必须加在外层容器上
轮播图“只显示一部分”的效果，靠的是容器裁剪，不是图片自己缩放或隐藏。如果漏掉 overflow: hidden，图片会原样铺开，滚动时看到边缘空白甚至背景色，用户第一反应就是“布局崩了”。
常见错误：给 .slides（图片容器）设 overflow: hidden，但它的父容器没设宽高或没限制溢出——结果还是溢出。正确做法是：.carousel 这个最外层 div 必须有固定宽高 + overflow: hidden。
- 宽高建议用具体值（如
width: 600px; height: 400px;），避免用100%导致父级无约束时塌陷 - 不要依赖 flex 容器自动撑高，图片是 inline 元素，默认 baseline 对齐，可能产生额外间隙
- 如果用了
position: relative做定位基准，也得一起加在最外层
所有图片必须水平紧密排列且宽度一致
轮播的位移计算（比如 transform: translateX(-600px)）前提是每张图占满一个“格子”，宽度完全相等。哪怕差 1px，滚动到第 5 张时偏移量就错位了，出现白边或重叠。
推荐用 display: flex + flex-shrink: 0 控制图片排列，比 float 或 inline-block 更稳：
- 给图片设固定宽（如
width: 600px），不要只设max-width或百分比 - 确保没有 margin/padding/gap 干扰总宽度；
gap在 flex 中会额外增加间距，慎用 - 如果图片原始尺寸不一，统一用
object-fit: cover+ 固定宽高容器裁剪，别靠width: 100%拉伸
transform: translateX() 的位移值必须动态匹配索引 × 单图宽度
手动 JS 控制轮播时，translateX() 的值不是写死的，得根据当前索引实时算。比如单图宽 600px，当前是第 2 张（索引为 1），就得设 transform: translateX(-600px)；索引为 0 就是 0，为 3 就是 -1800px。
容易踩的坑：
- 索引从 0 开始，但有人误用 1 开始计数，导致首张图偏移 -600px，直接空白
- 没考虑无缝循环场景：克隆首尾图后，逻辑索引和 DOM 索引不一致，位移值不能直接套用
currentIndex * width - transition 写在了单张图上，而不是
.slides容器上，动画不触发
无缝循环必须复制图片并做索引映射
纯 CSS 动画实现无限滚动时，靠复制整套图片序列（A-B-C → A-B-C-A-B-C）+ 动画位移等于原始总宽，来掩盖跳转。JS 轮播要真无缝，也得克隆首尾图，但关键在「逻辑索引」和「DOM 索引」分离。
例如原始 3 张图，克隆后 DOM 有 5 张（C-A-B-C-A），当用户点“上一张”到第 0 张时，实际跳到 DOM 索引 3（即克隆的 A），再瞬间重置为逻辑索引 0 —— 这个瞬移必须用 transform 瞬间完成，不能带 transition，否则看到回弹。
- 克隆的图要加
data-clone="true"标记，避免被指示器误读 - 自动轮播的
setInterval切换前，先判断是否到了克隆区，是则静默跳转、不清除定时器 - 移动端 touch 滑动松手时，也要按逻辑索引归位，不能按 DOM 索引硬切
实际最难调的往往不是动画本身，而是克隆后的索引同步和定时器状态管理——多一个 clearInterval 忘写，或少一次 resetTimer()，轮播就会错乱或卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
