bootstrap 5 轮播图（carousel）不自动切换或手动控制失效，通常因缺少必需的 javascript 依赖（如 bootstrap bundle 或 popper）、未正确引入资源、或 html 结构缺失关键属性所致。本文提供一站式排查与修复指南。
要使 Bootstrap 5 的 Carousel 正常滑动（包括自动轮播、左右按钮控制和指示器交互），必须确保以下三项全部满足：
✅ 1. 正确引入 Bootstrap 样式与 JS 资源
Bootstrap 5 不再依赖 jQuery，但强依赖 Popper 和 Bootstrap JS。推荐使用官方 CDN 提供的 bootstrap.bundle.min.js（已内置 Popper），无需单独引入 Popper —— 这是新手最常踩的坑。
✅ 推荐引入方式（精简、可靠）：
⚠️ 错误做法（导致 Carousel 失效）：
- 只引入 bootstrap.min.js（不含 Popper，Carousel 组件无法初始化）；
- 混用 bootstrap.min.js + 单独 Popper（易版本冲突）；
- 忘记引入任何 JS 文件（仅 CSS 无法触发交互逻辑）。
✅ 2. 确保 HTML 结构完整且语义正确
你的代码结构基本正确，但需注意两个关键点：
- 至少一个 .carousel-item 必须有 active 类（你已做到 ✅）；
- data-bs-ride="carousel" 属性用于启动自动轮播（你已添加 ✅）；
- 若需手动控制，请确认 data-bs-target 指向正确的 ID（你使用 #carouselExampleControls，与外层 id 一致 ✅）。
✅ 补充建议：添加轮播指示器（可选但推荐），增强可用性：
✅ 3. 检查浏览器控制台错误（快速定位问题）
打开浏览器开发者工具（F12 → Console），刷新页面，观察是否有如下报错：
- ReferenceError: bootstrap is not defined → JS 未加载或加载失败；
- TypeError: Cannot read properties of null → data-bs-target ID 不匹配；
- Failed to load resource → 图片路径错误（虽不影响滑动，但影响显示）。
? 小技巧：在控制台手动初始化 Carousel，验证 JS 是否就绪：
// 刷新后执行，若无报错且返回 Carousel 实例，则 JS 正常
const myCarousel = new bootstrap.Carousel(document.getElementById('carouselExampleControls'));✅ 完整可运行示例（复制即用）
Bootstrap 5 Carousel 示例
? 总结
Carousel 不滑动，90% 是因为 JS 资源未正确加载。请严格按顺序检查：
1️⃣ 引入 bootstrap.bundle.min.js（非 bootstrap.min.js）；
2️⃣ 确保
