最稳妥的轮播结构是用 div.carousel 包裹 div.carousel-inner，每张图置于独立的 div.carousel-item 中；该结构天然兼容自动播放、手动切换、指示点更新及后续扩展，而纯 img 并列会导致语义缺失、控制错位、dom 难维护、加载塌陷等问题。
div.carousel 包裹 div.carousel-inner，再把每张图放进独立的 div.carousel-item 里，是最稳妥、最易维护的结构。
这种结构不是“看起来高级”，而是能自然兼容自动播放、手动切换、指示点更新、错误兜底和后续扩展（比如触摸滑动或懒加载）——几乎所有线上出问题的轮播，根源都在结构太随意。
为什么不用纯 img 并列？
常见错误是这样写：
<div class="carousel"> @@##@@ @@##@@ @@##@@ </div>
问题很实在：
-
img没有语义分组，JS 找当前项得靠索引硬算，一加删图就错位 - 没法统一控制层叠（
position: absolute必须作用在包裹容器上） - 后续想加标题、按钮、遮罩层时，得反复改 DOM 结构，而不是只往
carousel-item里塞 - 图片加载失败时，
onerror只能挂到单个img上，但父容器塌陷风险更高（没固定高度+无占位）
carousel-item 必须设 position: absolute
这是让多张图叠在一起、只显示一张的关键。不设的话，display: none 或 opacity: 0 都会留白或撑开容器。
- 所有
carousel-item初始状态统一设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 只给当前项加
active类，CSS 里用.carousel-item.active { opacity: 1; z-index: 2 }控制显隐 - 别用
display: block/none切换 —— 容器高度会重排，尤其在图片未加载完时容易跳动
导航按钮和指示点怎么接进这个结构？
按钮和点本身不参与轮播逻辑，只是触发器。重点是它们的属性要和结构对齐：
- 左右按钮必须带
data-slide="prev"或data-slide="next"，JS 才能统一监听 - 指示点用
button而不是span，并设data-slide-to="0"、data-slide-to="1"等 - 所有按钮都加
type="button"，避免表单默认行为干扰（尤其在无 JS 降级时） - 指示点容器（如
div.carousel-indicators）建议用 JS 动态生成，和carousel-item数量保持一致，避免手工写漏
img 平铺或嵌套过深的 figure + picture，后面补兼容逻辑的成本远高于一开始多写两层 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
