Bootstrap Carousel无法自动切换图片问题求助

你遇到的问题是轮播仅显示单张图、无法切换且动画不生效，结合你的代码，可从以下几个方向排查：

1. 确认Bootstrap JS及依赖已正确引入 #

Bootstrap 5的Carousel组件需要JS驱动，且依赖Popper.js，必须在页面中正确引入相关资源，建议放在</body>标签前加载：

<!-- 先引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 再引入Popper.js，Bootstrap 5组件依赖它 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<!-- 最后引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

如果是本地文件，务必确认文件路径正确，且加载顺序不能颠倒。

2. 统一图片路径，确保所有图片正常加载 #

你的代码中图片路径不一致：第一张和第三张是/_assets/xxx，第二张是_assets/xxx，路径开头的斜杠会影响浏览器解析路径，可能导致第二、三张图片加载失败（浏览器返回404），所以看起来只有第一张图。
统一路径格式：

• 若_assets文件夹和当前页面在同一目录，用相对路径：

  <img src="_assets/carpic1.webp" class="d-block w-100" alt="pic1">
  <img src="_assets/carpic2.webp" class="d-block w-100" alt="pic2">
  <img src="_assets/carpic3.webp" class="d-block w-100" alt="pic3">
  

• 若_assets在网站根目录，用绝对路径：

  <img src="/_assets/carpic1.webp" class="d-block w-100" alt="pic1">
  <img src="/_assets/carpic2.webp" class="d-block w-100" alt="pic2">
  <img src="/_assets/carpic3.webp" class="d-block w-100" alt="pic3">
  

可通过浏览器F12打开「网络」面板，刷新页面查看图片是否有加载错误。

3. 确保Bootstrap版本与代码匹配 #

你当前的代码使用的是Bootstrap 5的属性格式（data-bs-ride、data-bs-target等带bs前缀的属性），如果引入的是Bootstrap 4或更早版本，会因为属性名不兼容导致组件失效，必须保证引入的是Bootstrap 5版本的资源。

4. 手动初始化轮播（可选） #

如果自动初始化失效，可尝试手动通过JS初始化：

document.addEventListener('DOMContentLoaded', function() {
  const carouselElement = document.getElementById('carouselExampleControls');
  new bootstrap.Carousel(carouselElement, {
    interval: 3000, // 轮播间隔时间（毫秒）
    wrap: true // 开启循环轮播
  });
});

内容的提问来源于stack exchange，提问作者artfsch