Bootstrap Carousel 正确结构为 carousel → carousel-inner → carousel-item 三层嵌套，carousel-item 必须是 carousel-inner 的直接子元素且首张加 active 类；需设固定高度并用 object-fit: cover 统一图片显示；关闭自动播放删 data-bs-ride="carousel"；移动端滑动需显式添加 data-bs-touch="true"。
Bootstrap Carousel 基础结构必须写对
直接复制官方示例容易出错，关键在三个层级嵌套不能乱：carousel → carousel-inner → carousel-item。少一层或类名拼错（比如写成 carousel_items）会导致轮播不切换、样式失效。
常见错误现象：图片堆叠显示、左右箭头不可点击、指示点不联动。
-
carousel-item必须是carousel-inner的**直接子元素**，中间不能插div包裹 - 首张图需加
active类，否则启动时空白 - 每个
carousel-item内建议只放一张img或带img的卡片，避免高度塌陷
图片宽高不一致导致布局跳动怎么办
默认情况下，carousel-item 高度由内容撑开，图片尺寸不同会让轮播区域反复伸缩。这不是 bug，是 CSS 自然行为，但体验很差。
解决思路是统一容器高度，并让图片自适应填充：
立即学习“前端免费学习笔记（深入）”；
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 给
.carousel或.carousel-inner设固定高度，如height: 400px - 给内部
img加object-fit: cover和width: 100%; height: 100% - 避免用
background-image模拟图片——Carousel 的 JS 切换逻辑依赖真实img元素的 DOM 位置
.carousel-inner {
height: 400px;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
如何关闭自动播放又保留手动切换
默认开启 data-bs-ride="carousel" 会自动启动轮播，但很多场景只需要用户点才动（比如首页 banner 不想干扰阅读）。
- 删掉
data-bs-ride="carousel"属性即可停用自动播放 - 左右箭头（
carousel-control-prev/carousel-control-next）和指示点（carousel-indicators）仍完全可用 - 如需后续用 JS 控制，调用
carousel('next')或carousel('pause')即可，无需重新初始化
移动端滑动支持不是默认开启的
Bootstrap 5.3+ 的 Carousel 默认**不启用触摸滑动**，即使在手机上也必须点箭头或指示点。这是为了兼容某些手势冲突场景，但多数轮播需要它。
启用方式很简单，但容易被忽略：
- 给
carousel元素加data-bs-touch="true" - 确保没同时设置
data-bs-interval="false"（这会禁用所有自动行为，包括 touch 事件绑定） - 注意：iOS Safari 对
touchstart有延迟，若滑动卡顿，检查是否被其他库（如 FastClick）干扰
轮播看似简单，但图片高度、触控开关、初始化时机这三个点，90% 的线上问题都集中在这儿。
