Bootstrap 4 carousel-indicators无法点击，如何修复该问题？

既然你移除自定义CSS后问题依旧，那问题肯定出在HTML结构或属性的细节上。我整理了几个最容易踩坑的点，你可以逐一核对：

• 检查data-target属性是否完全匹配轮播容器ID
  每个指示器<li>的data-target必须精确指向你的轮播容器ID，也就是#hero-slider——注意必须带#号，拼写也不能有任何错误（比如大小写、多打少打字符）。如果这个属性错了，指示器根本找不到对应的轮播组件，自然无法触发切换。

• 确认data-slide-to的索引值正确
  data-slide-to的值是从0开始的整数，要和幻灯片的顺序一一对应：第一个幻灯片对应0，第二个对应1，以此类推。如果索引重复、跳号，或者和幻灯片数量不匹配，点击指示器也会出现无响应的情况。

• 检查active类的位置
  轮播组件必须有一个初始激活的状态：

  • 指示器列表里要有且只有一个<li>带有active类；
  • .carousel-inner里也要有且只有一个.carousel-item带有active类；
    这两个active必须对应同一索引的幻灯片，否则初始状态混乱，会导致指示器交互失效。

• 确认轮播容器的基础类和初始化方式
  你的轮播容器#hero-slider必须包含carousel类（核心类），如果需要切换动画可以加slide类。另外，初始化方式二选一：

  1. 给容器加data-ride="carousel"属性，让Bootstrap自动初始化；
  2. 用JS手动初始化：$('#hero-slider').carousel();（确保在DOM加载完成后执行）。

• 核对HTML结构嵌套是否正确
  轮播的层级结构必须严格按照Bootstrap的规范：

  <div id="hero-slider" class="carousel slide">
    <!-- 指示器放在最外层容器里，和.carousel-inner同级 -->
    <ol class="carousel-indicators">...</ol>
    <div class="carousel-inner">
      <div class="carousel-item">...</div>
    </div>
    <!-- 控制按钮可选，也要放在最外层容器里 -->
    <a class="carousel-control-prev">...</a>
  </div>
  

  如果指示器被错误嵌套到.carousel-inner或者其他容器里，也会导致功能失效。

给你一个正确的结构示例，你可以对比自己的代码： #

<div id="hero-slider" class="carousel slide" data-ride="carousel" style="margin-bottom: 30px;">
  <!-- 指示器 -->
  <ol class="carousel-indicators">
    <li data-target="#hero-slider" data-slide-to="0" class="active"></li>
    <li data-target="#hero-slider" data-slide-to="1"></li>
    <li data-target="#hero-slider" data-slide-to="2"></li>
  </ol>
  <!-- 幻灯片内容 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="your-slide-1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="your-slide-2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="your-slide-3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
</div>

你可以先从data-target和active类这两个最容易出错的点开始检查，应该能快速定位问题。

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