轮播图跑不起来主因是结构或CSS问题：容器需overflow:hidden作用于.carousel-track直接父级，用transform:translateX()切换并同步更新状态，定时器须清理避免冲突，图片需设宽高防塌陷。
轮播图写完跑不起来，八成不是逻辑错，而是结构或 CSS 层面卡在几个固定位置。先确认最硬的约束：容器必须 overflow: hidden、图片必须独立 <img>、切换必须用 transform: translateX() —— 其他都是在这基础上调参。
轮播容器加了 overflow: hidden 还有横向滚动条
这不是 overflow 没生效，是它没加对地方。浏览器只对「直接父容器」生效，而很多人把 overflow: hidden 写在了最外层 <div class="carousel"> 上，实际滑动的是内部的 <div class="carousel-track">。如果这个 .carousel-track 的直接父级没设 overflow: hidden，超出部分照常显示。
- 检查 DOM 结构：确保加
overflow: hidden的元素，是.carousel-track的**直接父级**（通常是.carousel） - 别用
overflow-x: auto—— 它允许手动拖拽，不是裁剪 - 如果
.carousel-track是position: absolute，它的父容器必须同时设position: relative和明确高度（比如height: 400px），否则高度塌陷，裁剪失效 - 推荐组合：
display: flex+overflow: hidden，不依赖定位，兼容性更好
transform: translateX() 切换时图片闪一下或跳变
本质是 CSS transition 和 JS 更新节奏没对齐。比如设了 transition: transform 0.4s ease，但 JS 在动画中途又改了一次 transform 值，旧动画被中断，新值立刻生效，看起来就像“闪”。
- 所有位移更新必须走同一个函数，
currentIndex、translateX、指示点高亮状态同步改，不要拆成多步 - 加个锁变量
let isTransitioning = false，在transitionstart里设为true，transitionend再设回false，锁住期间忽略点击 - 避免在每帧读取
clientWidth或getBoundingClientRect()—— 强制同步回流，卡顿明显 - 移动端加
will-change: transform（仅在必要时），缓解 Safari 重绘抖动
自动轮播和手动切换冲突，切完立刻又跳下一张
根本原因是定时器没清理。只写 setInterval(nextSlide, 3000) 是危险操作：用户点按钮后，旧定时器还在跑，0.5 秒后又触发一次 nextSlide()，索引就乱了。
立即学习“前端免费学习笔记（深入）”；
- 定义全局变量
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer)，再carouselTimer = setInterval(...) -
mouseenter时清定时器，mouseleave时重开；手动点击导航按钮后也必须重置 - 别用
setTimeout递归模拟轮播 —— 容易堆栈溢出，且无法统一清理 - SPA 页面或 Tab 切换时，监听
visibilitychange，页面隐藏时暂停，恢复时重启
最常被忽略的其实是图片尺寸控制：<img> 不设宽高或只靠 max-width: 100%，会导致容器高度塌陷或跳动；object-fit: cover 能保比例，但得配 height: 100% 才生效 —— 这些细节不处理，再稳的 JS 逻辑也会在视觉上翻车。
