为什么我的引导控件不起作用？

Question

我正在尝试制作一个一次包含 3 个项目的引导轮播，并且可以控制切换到下一个项目。 我创建了这个显示三个项目的轮播，唯一的问题是控件在单击时不起作用，不太确定我缺少什么。

我在这里写了一个带有我的代码示例的代码笔。

和我的 HTML 下面的快速参考。

<div class="container">
  <div id="casesCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="row">
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>0</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>1</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item active">
            <div class="card card-body">
              <h1>2</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>3</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>4</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>5</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>6</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>7</h1>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="carousel-item ">
            <div class="card card-body">
              <h1>8</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#casesCarousel" 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="#casesCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
 </div>

Answer 1

您在此处缺少指向启用旋转木马工作的 java 脚本的链接。

将以下代码添加到您页面的 header

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

然后刷新ctrl+F5后重试。 Caroussel 不适用于纯 HTML 和 CSS 它需要来自引导程序的 js 库

Answer 2

您发现此示例在 codepen 中有错误；

bootstrap.min.js:6 Uncaught TypeError: Bootstrap 的 JavaScript 需要 jQuery。 jQuery 必须在 Bootstrap 的 JavaScript 之前包含 @*。 在 Object.jQueryDetection (bootstrap.min.js:6) 在 bootstrap.min.js:6 在 bootstrap.min.js:6 在 bootstrap.min.js:6 *@

引导 JS 源未添加到文件并在启动时出错。 请检查您的引导 JS 存在和版本以完成此操作。

Answer 3

没有注意到row and column删除这个。 并访问bootstrap-carousel

并添加jquery