Bootstrap 5 Carousel不滑动[关闭]答案

【问题标题】：Bootstrap 5 Carousel not sliding [closed]Bootstrap 5 Carousel不滑动[关闭]
【发布时间】：2021-04-16 07:21:27
【问题描述】：

我想在我的页面中包含一个轮播，它不会滑动，只显示第一张图片。其他引导组件确实有效，这是我的代码：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="./img/slider/slider1.png" class="d-block w-100 active" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/slider/slider2.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/slider/slider3.png" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

我确实是从引导文档中复制粘贴的，但它仍然无法正常工作。

【问题讨论】：

只是为了澄清，在你的标题和标签中你特别提到了bootstrap-5。但是，在您提供的代码中，您只使用bootstrap-4.1.x。你现在使用什么引导程序？
sn-p 中的代码调用 bootstrap/4.1.3/js/bootstrap.min.js，但轮播代码用于 Bootstrap 5 - 检查您的 CDN 链接
投票结束：问题不可重现或由拼写错误引起。该问题是由链接错误的 bottstrap 库引起的。
@tacoshy，谢谢你的评论。我遇到了这个问题。我刚刚新建了一个ASP.Net MVC 5项目，本地安装的Bootstrap版本是4.3.1。但是当前的 Bootstrap 版本是 5.1。所以现在我注释掉了对本地 Bootstrap 的引用，现在我从他们的 cdn 获取它，我的轮播正在工作！谢谢。
对于那些使用bootstrap 类实用程序的人，可以像这里的文档一样直接调用类：getbootstrap.com/docs/5.1/components/carousel。旋转木马的滑动动画似乎无法正常工作，直到我添加了这一行 import "bootstrap/dist/js/bootstrap.min.js" 和 import "bootstrap/dist/css/bootstrap.min.css"。这些行可以分别添加到根 index.js 文件或单个文件中。

标签： javascript html css frontend bootstrap-5

【解决方案1】：

如 cmets 中所述，您链接的 Boostrap 库不正确。您使用的是 Boostrap 5 代码，但使用的是 Boostrap 4 库。

Bootstrap 5 的 CSS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

JS 捆绑包：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

这是一个使用正确库的工作示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://source.unsplash.com/random/100x80?sig=1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/100x80?sig=2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/100x80?sig=3" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

【讨论】：