轮播图正确html结构必须为三层嵌套：外层.carousel设overflow:hidden和固定宽高；中层.carousel-inner用flex或absolute排列；内层.carousel-item包裹img。每张img须显式设宽高或通过css约束，导航按钮与指示器须用type="button"的button元素，初始仅一张.carousel-item带active类。
轮播图 HTML 结构必须用三层嵌套容器
单层 <div class="carousel"> 包一堆 <code><img> 是错的，会导致 CSS 定位失效、JS 控制混乱、后续加动画或响应式极难扩展。真正可用的结构是明确分工的三层：
<div class="carousel">：最外层“窗口”，必须设 <code>overflow: hidden+ 固定宽高（如width: 100%; height: 400px），否则图片溢出或容器塌陷<div class="carousel-inner">：中间“滚动层”，所有图片项并排排列（用 <code>display: flex或position: absolute），不设宽高，由子项撑开<div class="carousel-item">：每个图片项，内部放 <code><img>，不要直接把<img>当作轮播项顶层元素常见错误是用
<ul></ul>或<figure></figure>替代<div class="carousel-item">——语义错位、默认样式干扰大、JS 选择器难统一。 <h3>每张图必须显式设置宽高或约束尺寸</h3> <p>只写 <code><img src="a.jpg" alt="...">不设尺寸，页面加载时会反复重排，轮播区域可能瞬间消失或跳动。这不是 JS 没跑起来的问题，是 HTML 层就漏了防护：- 推荐给
<img>加width="800" style="max-width:90%"属性（像素值需与设计稿一致），强制保留占位 - 或用 CSS 统一控制：
.carousel-item img { width: 100%; height: auto; object-fit: cover; }，但前提是.carousel-item有固定高（如height: 450px） - 绝对不要依赖图片原始尺寸——网络慢、CDN 故障、404 时，
offsetHeight可能为 0，整个轮播塌成一条线
导航按钮和指示器要放在正确层级，且禁用默认行为
按钮和指示器不是装饰，它们要能被 JS 精准绑定事件，同时在无 JS 或报错时也不破坏布局：
- 左右箭头用
<button type="button" class="carousel-prev"></button>，不能用<a href="#"></a>或没type的<button></button>，否则点击会跳顶或刷新 - 指示器放
<div class="carousel-indicators"> 内，每个点用 <code><button type="button" data-index="0"></button>，不用<span></span>——可聚焦、可键盘操作、语义清晰 - 所有按钮默认不设
disabled，JS 初始化后按需添加；避免提前写disabled导致首次渲染不可点 - HTML 中只有一张带
class="active"，例如：<div class="carousel-item active"><img ...></div> - JS 初始化函数第一件事就是确认当前只有一个
.active，用document.querySelector(".carousel-item.active")检查，不存在则补上，存在多个则清空后重设 - 别信 “CSS 里写
.carousel-item:first-child { display: block; }” ——它无法应对动态插入、懒加载或服务端渲染场景
初始状态必须手动指定第一张激活，且仅一张
靠 CSS 默认显示第一张（比如只给第一个
<img>加display: block）不可靠——DOM 加载顺序、JS 执行时机、图片加载失败都会导致多图叠加或全黑：结构搭错，后面所有动画、暂停、触摸支持都建立在流沙之上。最常被忽略的是容器高度锁定和图片尺寸防护，这两点上线后才暴露，但修复成本远高于写代码时多敲两行属性。
- 推荐给
