克隆首尾项是硬性要求，因为dom中仅有三张图时，切到末尾再向右只能跳回首张，导致视觉回弹或黑屏；真正无缝需将dom扩展为21[0]共n+2项，使视口始终在真实内容段内滑动。
为什么 clone 首尾项是硬性要求
浏览器不会自动把最后一张图接回第一张——DOM 里只有 [0][1][2] 三张图时，切到 2 后再向右，只能跳回 0，人眼会看到明显回弹或黑屏。真正无缝的前提是 DOM 变成 [2][0][1][2][0]（共 n+2 项），让视口始终在“真实内容段”内滑动。
克隆顺序不能错：首项克隆 放最前、末项克隆 放最后；初始 transform 必须设为 translateX(-100%)，跳过 fake-first 才能对齐第一张真实图。
- 所有
.carousel-item宽度必须严格一致，禁用width: 100%或flex: 1，否则克隆项宽度偏差会导致位移错位 - 容器宽度要固定（如
100vw或具体像素），不能靠内容撑开 - 务必加
will-change: transform，否则 iOS Safari 容易掉帧
transitionend 而不是 setInterval 来触发重置
用 setInterval 定时强制重置，会和动画节奏脱节：网络卡、CPU 负载高时，它仍准时触发，可能在动画中途打断，造成撕裂或卡顿。正确做法是监听 transitionend 事件，在每次位移动画真正结束时检查索引。
重置前必须先设 element.style.transition = 'none'，否则会触发反向动画；重置后要用 setTimeout(() => { element.style.transition = 'transform 0.3s ease-in-out' }, 10) 延迟恢复，确保样式重绘完成。
- 只监听一次：用
el.addEventListener('transitionend', handler, { once: true }) - Safari 兼容要处理
webkitTransitionEnd，建议封装成transitionEndEvent变量 - 别在
touchmove中实时更新translateX，性能抖动明显；滑动逻辑只在touchend判断一次方向
手动交互时定时器管理最容易出错
用户快速连点左右箭头或小圆点，不处理好定时器，会出现动画叠加、索引错乱、甚至 clearInterval 清错 ID 导致多个定时器并发运行。
每次点击/触摸前，必须先 clearInterval(timerId)；交互完成后，不要立即重启定时器——等当前动画彻底结束（即 transitionend 后）再调用 startTimer()。
- 悬停暂停用
mouseenter/touchstart，恢复用mouseleave/touchend，别用focus或blur—— 移动端不触发 - 多个轮播组件必须各自维护独立的
timerId和currentIndex，不能共用全局变量 - 切换时用
classList.replace('active', 'next-active')比反复add/remove更安全，避免状态残留
overflow: hidden 和 flex 排列的隐藏陷阱
轮播容器必须设 overflow: hidden，否则克隆项会溢出显示；所有图片放在一个 .slides 内，用 display: flex 横向排列，每次只改这个父容器的 transform，不要操作单张图的样式。
常见失效原因不是 CSS 写错，而是触发条件缺失：比如没禁用 left 或 margin-left 动画（它们会触发重排，必然卡顿），或者没设 position: absolute 导致 carousel-item 无法层叠覆盖。
- 移动端滑动需记录
touchstart的e.touches[0].clientX，touchend时算差值，仅当Math.abs(diff) > 50才触发切换 - 加
e.preventDefault()阻止默认滚动，但只对轮播容器生效，别写成document.body级别 - 指示器（dots）的
data-slide-to值必须是数字字符串，如"0"，不是数字0，否则querySelector匹配失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
