最稳妥的轮播结构是用 div.carousel 包裹 div.carousel-inner，每张图置于独立的 div.carousel-item 中；该结构天然兼容自动播放、手动切换、指示点更新及后续扩展，而纯 img 并列会导致语义缺失、控制错位、DOM 难维护、加载塌陷等问题。

直接说结论：用 div.carousel 包裹 div.carousel-inner，再把每张图放进独立的 div.carousel-item 里，是最稳妥、最易维护的结构。 这种结构不是“看起来高级”，而是能自然兼容自动播放、手动切换、指示点更新、错误兜底和后续扩展（比如触摸滑动或懒加载）——几乎所有线上出问题的轮播，根源都在结构太随意。

为什么不用纯 img 并列？

常见错误是这样写：

<div class="carousel">
  <img src="a.jpg">
  <img src="b.jpg">
  <img src="c.jpg">
</div>

问题很实在：

• img 没有语义分组，JS 找当前项得靠索引硬算，一加删图就错位
• 没法统一控制层叠（position: absolute 必须作用在包裹容器上）
• 后续想加标题、按钮、遮罩层时，得反复改 DOM 结构，而不是只往 carousel-item 里塞
• 图片加载失败时，onerror 只能挂到单个 img 上，但父容器塌陷风险更高（没固定高度+无占位）

carousel-item 必须设 position: absolute

这是让多张图叠在一起、只显示一张的关键。不设的话，display: none 或 opacity: 0 都会留白或撑开容器。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 所有 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。