overflow: hidden 必须加在直接包裹滑动容器（如.carousel-track）的父元素（如.carousel-inner或.carousel）上；若加错位置、父容器未设定位或高度，或.track脱离文档流，则裁剪失效。
overflow: hidden 加在哪儿才真正裁剪
轮播图出现横向滚动条，不是因为没加 overflow: hidden，而是加错了位置。它必须作用于「直接包裹滑动容器」的父元素——比如 .carousel-track 是 flex 横向排列的容器，那它的父级（通常是 .carousel-inner 或直接是 .carousel）就必须设 overflow: hidden。如果只加在外层 wrapper 上，而 .carousel-track 自身脱离文档流（比如用了 position: absolute），父容器又没设 position: relative 或显式高度，裁剪就完全失效。
常见错误包括：
- 把
overflow: hidden写在.carousel的子元素（如.carousel-controls）上 - 给
.carousel-track设了overflow-x: auto，结果用户能手动拖拽，破坏自动轮播逻辑 - 依赖
margin-left动画，位移后元素仍占布局空间，overflow压根不生效
setInterval 切页后定时器失控
页面切到后台再切回来，轮播突然连播三张、或卡顿不动，基本都是 setInterval 在不可见时持续运行导致的。浏览器不会自动暂停它，也不会补偿丢失的时间。
更隐蔽的问题是：每次点击“下一张”按钮都调用一次 startTimer()，却没先 clearInterval(this.timer)，结果多个定时器并发执行，索引狂跳。
稳妥做法是：
- 用
setTimeout替代setInterval：每次切换完再设下一轮，天然可中断 - 监听
document.visibilityState，在visibilitychange事件里手动clearInterval和恢复 - 全局只维护一个
timer变量，每次启动前先清空
手动切换后自动轮播不同步
用户点第三个小圆点，图片切过去了，但两秒后自动轮播却跳回第二张——说明 currentIndex 没同步更新，或者更新了但定时器还在按旧索引跑。
状态不同步的典型表现：
- 只改了
transform: translateX()，漏掉currentIndex = 2 - 点太快，动画还没结束就触发新切换，
isTransitioning标志位没设，导致位移被覆盖、索引错乱 - 左右箭头按钮没统一走
goTo(index)函数，而是各自写逻辑，currentIndex更新路径不一致
所有状态变更（索引、位移、指示点高亮）必须在同一个函数内原子完成，不能拆成异步步骤。
移动端 touch 事件被 Safari 吞掉
iOS Safari 默认把横向 touchmove 当作页面滚动处理，你的 touchstart/touchmove 根本收不到事件，轮播图拖不动。
关键修复项：
- 给轮播容器加
touch-action: pan-y（允许竖向滚动）或touch-action: none（完全接管） -
touchstart中必须调用e.preventDefault()，但仅限你确定要拦截默认行为时 - 别用
clientX差值直接判断方向——手指斜划时clientY偏移大，容易误判；应计算Math.abs(dx) > Math.abs(dy) * 1.5才视为横向滑动 - 松手后吸附逻辑必须基于剩余偏移量：
Math.abs(offset) > width * 0.3才切换，否则停在半路
最易被忽略的是：PC 上测试用 mousemove 能跑通，一上真机就失效——触摸事件和鼠标事件不是简单替换关系，必须单独实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
