轮播需用 transform: translateX() 替代 margin-left 避免重排，配合 overflow: hidden、flex-shrink: 0 或 width: 100%、可控暂停机制、图片错误兜底、UI 状态同步及边界处理，确保稳定不崩、不卡、不塌。
用 transform: translateX() 切图比 margin-left 更稳
直接改 margin-left 会触发 layout（重排），尤其在低端设备或图片多时，轮播卡顿明显；而 transform: translateX() 只走合成器线程，GPU 加速，切换顺滑。必须给外层容器加 overflow: hidden，否则位移后能看到溢出内容。所有子项（如 .carousel-item）需设 flex-shrink: 0（若用 flex 布局）或 width: 100%（若用 inline-block），防止被压缩变形。
setInterval 必须配合暂停开关，不能裸跑
用户还没看清就切走，体验差；但只手动不自动，又显得呆板。关键不是“停掉定时器”，而是“可控暂停”。推荐用布尔变量 + 重启机制：
-
let isPaused = false全局控制状态 - 鼠标悬停
mouseenter时设isPaused = true，移出时设false - 左右按钮点击也设
isPaused = true，避免手动切完立刻被自动逻辑覆盖 - 每次
nextSlide()前都检查if (!isPaused)，不满足就跳过 - 页面卸载前（
window.onunload）或组件销毁时调用clearInterval(timer)，否则用户反复进出页面可能堆积多个定时器
图片 404 会导致轮播塌陷，得加兜底
本地测试好好的，一上服务器就空白——八成是某张图加载失败，.carousel-inner 高度坍缩。解决办法有两个方向：
- 给每张
onerror回调：onerror="this.style.display='none'"，或替换成占位图 - 给轮播容器设最小高度：
min-height: 300px，并确保父级不塌缩（比如加display: block） - 更稳妥的是：用
img.naturalWidth === 0在 JS 中检测加载失败，在showSlides()前跳过该幻灯片索引
左右箭头和指示点要和当前索引严格同步
常见错误是点击指示点后，索引更新了，但箭头按钮的禁用状态没变，或者点“上一张”到首张后，左箭头没变灰，再点就崩。修复要点：
- 所有 UI 控制元素（
.carousel-prev、.carousel-next、.carousel-dot）必须在showSlides(n)执行后统一刷新状态 - 左箭头在
slideIndex === 1时disabled = true，右箭头在slideIndex === slides.length时禁用 - 指示点高亮靠
classList.toggle('active')，别用innerHTML重写整个 DOM - 如果支持无限循环，就别做边界禁用，而是用模运算更新索引：
slideIndex = ((slideIndex - 2) % slides.length) + 1
轮播最麻烦的从来不是“怎么动起来”，而是“动错时怎么不崩、不动时怎么不卡、图挂了怎么不塌”。这些细节不处理，上线后第一波用户反馈基本就是“轮播不动了”“点一下跳两张”“图片全没了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
