我的引导程序 5 轮播按钮不起作用答案

【问题标题】：My bootstrap 5 carousel buttons are not working我的引导程序 5 轮播按钮不起作用
【发布时间】：2021-08-19 09:37:50
【问题描述】：

我似乎无法弄清楚为什么这些按钮在单击时不起作用。两个轮播项目都在那里（通过更改哪个是活动的来确认）。我查看了 getbootstrap 网站并按照它解释的代码进行操作，但没有任何变化。会不会是我在脑海中遗漏了一个我找不到/不知道的链接？

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TinDog</title>

  <!-- Bootstrap Scripts -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>

  <link rel="stylesheet" href="css/styles2.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>

<!-- Testimonial Section -->
  <section id="testimonials">

    <div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class="testimonial-img" src="images/dog-img.jpg" alt="dog-image">
          <em class="pebbles">Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img class="testimonial-img" src="images/lady-img.jpg" alt="lady-img">
          <em class="beverly">Beverly, Illinois</em>
        </div>
      </div>

<!-- Carousel Buttons -->
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonials"  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="#testimonials"  data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>

    </div>

  </section>

【问题讨论】：

当我运行代码 sn-p 时，我看不到任何呈现的按钮。但是，我确实在您的 html 中看到了按钮标签。

标签： bootstrap-5

【解决方案1】：

从该行中删除id="testimonials

 <section id="testimonials">

一个 ID 只能使用一次，在这种情况下，ID testimonials 就在它需要的位置上（按钮使用它作为目标 data-bs-target="#testimonials"）

<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">

我注意到您的引导 CSS 和 JS 的版本号不匹配。我会将这些 CDN 与 bootstrap 5 page 上提供的 CDN 交换，这有助于获得预期的结果。

CSS - 5.0.0-beta2

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css

JS - 5.0.0-alpha2

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>

<!-- A blank template with twitter bootsrap and dependencies added as external resources, to play around. Feel free to fork this and use. -->
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinDog</title>

    <!-- Bootstrap Scripts -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <link rel="stylesheet" href="css/styles2.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
  </head>

  <!-- Testimonial Section -->
  <section >

    <div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class="testimonial-img" src="https://picsum.photos/200/300" alt="dog-image">
          <em class="pebbles">Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img class="testimonial-img" src="https://picsum.photos/500/300" alt="lady-img">
          <em class="beverly">Beverly, Illinois</em>
        </div>
      </div>

      <!-- Carousel Buttons -->
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonials" 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="#testimonials" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>

    </div>

  </section>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

【讨论】：

非常感谢！现在效果很好。我拥有不同 CDN 的原因是因为我从 getbootstrap 获得的 CDN 弄乱了我的代码的早期部分，而您提供的那些可以完美运行。再次感谢
@Liam，很高兴它成功了！很高兴这个 CDN 组合运行良好。如果我的回答有帮助，请将其标记为最佳答案，这将对我有所帮助。谢谢！

【解决方案2】：

将按钮更改为锚点并使用 href。这是来自引导程序。

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

【讨论】：