纯HTML模板无法独立实现轮播图，必须配合JavaScript控制状态和CSS管理动画。template标签仅为DOM占位符，需手动挂载并调用initCarousel()初始化，该函数须完成索引绑定、事件注册与自动播放启动，且多实例间须严格隔离状态与定时器。
纯 HTML 模板本身不能封装可交互的轮播图组件——必须搭配 JavaScript 控制状态、CSS 管理显隐与动画，三者缺一不可。所谓“HTML 模板封装”，实际是指定义一套可复用的结构约定 + 对应的轻量 JS/CSS 配套逻辑。
为什么直接写 <template></template> 无法实现轮播
<template></template> 标签只是 DOM 片段占位符，浏览器不会自动渲染或执行其中脚本；它不触发任何事件监听、不启动定时器、也不响应用户操作。如果你把轮播结构塞进 <template></template> 里却不挂载、不初始化 JS，页面上什么都不会动。
- 常见错误：复制一段带
class="carousel-item active"的 HTML 到<template></template>中，以为粘贴过去就能跑 - 真实依赖：必须用
document.importNode()或innerHTML手动插入，再调用初始化函数（如initCarousel()） - 模板价值在于结构一致性：比如统一用
data-index、固定 class 名（carousel、carousel-inner）、预留data-slide-to属性位置
initCarousel() 必须做的三件事
每次从模板克隆出轮播实例后，initCarousel() 要立刻完成状态绑定、事件注册和自动播放启动，否则组件处于“静默”状态。
- 查当前
.carousel-item.active索引，设为currentIndex初始值 - 绑定所有
.carousel-prev、.carousel-next和[data-slide-to]的 click 事件，且每个事件处理器需闭包捕获对应轮播容器（避免多个轮播互相干扰） - 调用
startAutoSlide()启动setInterval，并把返回的 timer ID 存到容器 dataset 里（如el.dataset.slideTimer = timerId），方便后续暂停/重启
多个轮播共存时最容易漏掉的隔离点
当页面上有两个以上轮播，共享变量或未限定作用域会导致切换错乱、定时器叠加、指示点全亮或全灭。
立即学习“前端免费学习笔记（深入）”；
- 每个轮播的
slideInterval必须独立声明在闭包内，不能写成全局变量 - DOM 查询范围要限定：用
carouselEl.querySelectorAll('.carousel-item')，而不是document.querySelectorAll('.carousel-item') - 指示点生成逻辑不能硬编码
document.querySelector('.carousel-dots')，而应基于当前轮播容器查找：carouselEl.querySelector('.carousel-dots') - 悬停暂停时，只清除当前轮播的 timer，不要
clearInterval()所有已存在的定时器
CSS 过渡失效的隐蔽原因
即使写了 transition: opacity 0.3s ease，动画仍可能卡顿或不触发——问题往往不在 CSS 本身，而在 DOM 状态或布局约束。
-
.carousel-item必须有明确宽高（如width: 100%; height: 400px），否则opacity变化无法被视觉引擎稳定追踪 - 父容器
.carousel若设了overflow: hidden，但子项没设position: absolute，会导致层叠失效，多张图同时可见 - 切换时若用
display: none/block替代opacity，会触发重排（reflow），造成卡顿；应始终配合visibility: hidden或pointer-events: none做辅助控制 - 不要给
.carousel-item.active单独加transition，而应在所有.carousel-item上统一声明，否则新激活项无过渡
真正轻量的关键不是代码行数少，而是每个轮播实例彼此绝缘、状态不泄漏、动画不抢资源。模板只是骨架，血肉靠 JS 注入，神经靠事件绑定——漏掉任意一环，复制出来的组件就只是静态快照。
