Bootstrap carousel指示器不显示、幻灯片不切换问题

你引入的是Bootstrap 5.1.3版本，但使用的轮播组件代码是Bootstrap 4版本的语法，两个版本的组件属性规则、类名、结构要求不兼容，加上代码本身存在id匹配错误、结构位置错误，才会出现指示器不显示、轮播无法自动切换、控件失效的问题。

• 属性前缀不兼容：Bootstrap 5 所有组件的交互属性统一加bs前缀，旧版的data-ride、data-target、data-slide-to、data-slide全部失效，需要替换为data-bs-ride、data-bs-target、data-bs-slide-to、data-bs-slide
• ID匹配错误：轮播根容器设置的id是carouselIndicators，但左右切换按钮的href指向了不存在的#carouselExampleIndicators，控件无法绑定到对应轮播
• 类名失效：Bootstrap 5 移除了屏幕阅读器专用类sr-only，替换为visually-hidden，旧类名不会生效
• 结构位置错误：左右轮播控制按钮被错误嵌套在.carousel-inner容器内部，正确位置应该和.carousel-indicators、.carousel-inner平级，直接放在轮播根容器下
• 指示器顺序错误：指示器的跳转索引写乱了，第二个指示器指向索引2、第三个指向索引1，点击时会出现幻灯片跳转顺序错乱
• 自动轮播配置：正确添加data-bs-ride="carousel"属性后，轮播会在页面加载完成后自动开始切换，也可以通过data-bs-interval属性自定义单张幻灯片的停留时长（单位为毫秒，默认值5000）

<!DOCTYPE html>
<html>
<head>
  <title>realatte task</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- Bootstrap 5 JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <link href="style.css" rel="stylesheet">
  <script src="script.js"></script>
</head>
<body>
  <div class="container-fluid carousel-section-1">
    <div id="carouselIndicators" class="carousel slide mt-4" data-bs-ride="carousel">
      <!-- 轮播指示器 -->
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselIndicators" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselIndicators" data-bs-slide-to="2"></li>
      </ol>
      <!-- 轮播内容容器 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="testimonial.png" alt="First slide">
          <p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
          <p class="mt-3">-Segero, NoranicMeds</p>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="testimonial.png" alt="Second slide">
          <p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
          <p class="mt-3">-Segero, NoranicMeds</p>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="testimonial.png" alt="Third slide">
          <p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
          <p class="mt-3">-Segero, NoranicMeds</p>
        </div>
      </div>
      <!-- 轮播控制按钮 移到和carousel-inner平级的位置 -->
      <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselIndicators" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </a>
    </div>
  </div>
</body>
</html>

补充说明：如果需要自定义轮播样式、切换效果，可以在自己的style.css里覆盖默认样式，不要修改Bootstrap源文件。

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