答案：用 transform: translateX() 实现平滑滑动是目前最可控、性能最好的手写轮播方式，需将位移作用于 .carousel-inner（display: flex），子项设 flex-shrink: 0 且每张图宽为父容器100%，配合 transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)，并严格管理定时器防叠加、校准边界状态。
直接改 HTML 结构 + CSS 样式 + 少量 JS 逻辑就能控制轮播效果，不需要重写整页或引入框架——前提是别把 transform 写错位置、别漏掉 overflow: hidden、别让定时器叠加运行。
怎么用 transform: translateX() 实现平滑滑动
这是目前最可控、性能最好的手写轮播方式，浏览器不重排，GPU 加速，移动端也跟手。
-
.carousel-inner必须设display: flex，所有图片项（.carousel-item）用flex-shrink: 0防止被压缩 - 每张图宽度必须是父容器的 100%，不能靠
width: 100%算，得用min-width: 100%或固定flex-basis: 100% - 位移操作只作用在
.carousel-inner上，不是单张图；transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)要写在这里 - 别用
left或margin-left做位移——会触发重排，卡顿明显
为什么 setInterval 容易导致轮播错乱
定时器没清理干净时，多次点击“下一张”或快速悬停/离开，会累积多个未结束的切换任务，currentIndex 和实际 DOM 状态脱节。
- 每次调用切换函数前，先
clearInterval(this.timer)（假设 timer 是实例变量） - 自动播放启停要绑定到
mouseenter/mouseleave，但注意：移动端没有 hover，得加focusin/focusout或监听touchstart - 如果用了
requestAnimationFrame做动画，记得在切换开始前调用cancelAnimationFrame - 边界判断必须严格：
if (currentIndex >= slideCount) currentIndex = 0，不能只靠% slideCount，否则负值会出错
纯 CSS 轮播在什么情况下会失效
靠 input[type="radio"] + :checked ~ .slide 的方案看似简单，但真实项目里很容易翻车。
- 所有
input必须同级、name相同，且紧跟对应内容块——跨div包裹就匹配不到 - 无法响应用户拖拽，也不能暂停自动播放；
@keyframes控制的动画一旦开始，:hover只能暂停，不能跳转到指定帧 - 指示点（dots）要同步高亮，只能靠相邻兄弟选择器硬推，第 5 张图就得写 5 层
~，维护成本高 - IE11 及以下不支持
:focus-within，而它常被用来做交互暂停，所以别指望兼容老系统
真正难的不是让图动起来，而是让动的过程不卡、不跳、不堆叠、不脱节——尤其是手动干预后，状态必须立刻对齐。多数问题都出在位移计算和定时器管理上，而不是结构或样式本身。
