我的 Bootstrap 轮播没有提供幻灯片

Question

我复制了一个 Bootstrap 轮播代码以了解它的工作原理，但该代码并没有给我想要的结果。幻灯片没有移动。第一张幻灯片只是停滞不前。请问你建议我做什么？这是html和css代码。为了更清楚，我还附上了它的屏幕截图。

html

  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
        <img src="..." class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color: purple;">
      <img src="..." class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div> 

css

.carousel-item{
 height: 500px;   
} 

Snippet of my html and css codes

Answer 1

将此代码添加到 .html 文件的“head”标签内。

为什么需要添加这个？答案是每当您使用 3rd 方库时，您要么需要将其安装到您的项目中，要么使用其 CDN 使其工作。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>