轮播图结构必须满足硬性约束：根类名为.carousel，内部包含.carousel-inner、.carousel-controls、.carousel-dots三个固定子容器；每张图须包裹在.carousel-item内且不可设display:none或visibility:hidden；.carousel-inner需设position:relative或display:flex；.carousel-item初始状态为opacity:0+transition；按钮和指示点须含指定data-slide属性。
轮播图结构必须满足哪些硬性约束
可配置的前提是结构稳定、语义清晰、不耦合样式逻辑。所有轮播图容器必须用 .carousel 作为根类名，内部至少包含三个固定角色的子容器：.carousel-inner（图片内容区）、.carousel-controls（按钮区）、.carousel-dots（指示器区）。每张图必须包裹在 .carousel-item 元素内，且该元素不能直接设 display: none 或 visibility: hidden——否则 CSS 动画无法触发重绘。
常见错误：把 img 标签直接放在 .carousel 下，跳过 .carousel-item 层级；或给 .carousel-item 加 float: left，导致 flex 布局失效。
-
.carousel-inner必须设position: relative或display: flex，否则绝对定位的子项会脱离预期流 - 所有
.carousel-item初始状态需统一设opacity: 0+transition: opacity 0.3s，而非靠z-index控制显隐 - 左右按钮必须带
data-slide="prev"和data-slide="next"，指示点必须带data-slide-to="0"这类数字字符串属性
如何让轮播图支持运行时参数配置
配置不是靠写死 class 名或 inline style，而是通过 data- 属性注入行为参数。例如自动播放间隔、是否循环、是否暂停 on hover、是否启用触摸滑动——这些都应从 DOM 属性读取，而非硬编码进 JS。
示例：在 <div class="carousel" data-interval="5000" data-wrap="true" data-pause="hover"> 中，JS 初始化时用 <code>element.dataset.interval 读取值，再转成 number 类型用于 setInterval。注意 dataset.wrap 是字符串，需手动转布尔：JSON.parse(element.dataset.wrap)。
-
data-interval默认为3000，设为0表示禁用自动播放 -
data-pause只接受"hover"或空值，其他值会被忽略 -
data-touch为"true"时才绑定touchstart/touchend，否则跳过移动端逻辑 - 配置项必须有 fallback：比如未设
data-interval，就用默认值，不能报错中断初始化
为什么手动切换后自动轮播容易失控
失控本质是定时器叠加或未同步状态。一个轮播实例只能持有一个 setInterval 实例，但很多人在 next() 函数里直接调用 startSlide()，结果每次点击都新建一个定时器，越点越快。
正确做法是：全局只声明一个 let slideInterval = null，所有操作都基于它判断和重置。用户点击后先 clearInterval(slideInterval)，再立即调用一次切换逻辑，最后根据配置决定是否重启定时器。
- 鼠标移入容器时只暂停（
clearInterval），移出时才重启（startSlide()），不要在mouseenter里立刻 restart - 触摸滑动触发切换后，同样要清除并重置定时器，否则手指刚松开就跳下一张
- 多个轮播共存时，每个实例必须维护独立的
slideInterval变量，不能共用全局变量 - 切换函数里用
classList.replace('active', 'active')比先remove再add更安全，避免中间态丢失
无缝循环与克隆节点的边界陷阱
无缝循环不是靠 CSS 动画“假装连续”，而是真实 DOM 克隆首尾项，并用逻辑索引映射到视觉位置。比如 3 张图，实际 DOM 是 [2, 0, 1, 2, 0]，但用户看到的始终是中间 3 个（索引 1–3）。
关键难点在于：克隆后，原生 querySelectorAll('.carousel-item') 会返回 5 个节点，但业务逻辑仍应只按 3 张图处理。所以所有索引计算必须走映射函数，例如 realIndex = (currentIndex + totalItems) % totalItems。
- 克隆节点必须用
cloneNode(true)，否则事件监听器丢失 - 克隆后要重新绑定指示点事件，因为新节点没有
data-slide-to的 click 监听 - 触摸滑动判断方向时，
diff计算必须基于原始图宽，不能用克隆后的总宽度 - 首次加载时若克隆了首尾项，但未同步更新指示点数量，会导致点数与图数不一致
