Bootstrap v3.3.7轮播组件无法激活问题求助

我帮你排查了代码里的几个关键问题，这都是Bootstrap 3和后续版本的API差异导致的，咱们一步步修正：

核心错误点 #

• 幻灯片类名错误：Bootstrap 3.3.7中轮播的幻灯片容器类是item，你用的carousel-item是Bootstrap 4及以上版本的类名，Bootstrap 3无法识别这个类。
• 目标选择器错误：轮播指示器的data-target、控制按钮的href都指向了#，这会导致控件无法关联到正确的轮播容器，必须改为指向你的轮播ID #myCarousel。
• （可选优化）轮播容器可以添加slide类，开启幻灯片切换的平滑过渡效果。

修正后的完整HTML代码 #

<!--Carousel Wrapper-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <!--First slide-->
    <div class="item active">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
    </div>
    <!--/First slide-->
    <!--Second slide-->
    <div class="item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide">
    </div>
    <!--/Second slide-->
    <!--Third slide-->
    <div class="item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
    </div>
    <!--/Third slide-->
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

脚本部分说明 #

你当前的脚本引入和初始化代码是没问题的：

<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js"></script>
<script>
  $(document).ready(function () {
    $('#myCarousel').carousel();
  });
</script>

因为你已经在页面末尾加载了jQuery和Bootstrap脚本，并且用$(document).ready确保DOM加载完成后初始化轮播，这部分不需要修改。

验证方法 #

修改后重新运行项目，轮播应该能自动激活（因为你加了data-ride="carousel"属性），点击控制按钮或指示器也能正常切换幻灯片了。

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