时间戳

首页 > 解决方案 > 我的引导程序 5 轮播按钮不起作用

bootstrap-5 - 我的引导程序 5 轮播按钮不起作用

问题描述

我似乎无法弄清楚为什么单击时按钮不起作用。两个轮播项目都在那里（通过更改哪个是活动的来确认）。我查看了 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>

标签： bootstrap-5

解决方案

id="testimonials从此行中删除

 <section id="testimonials">

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

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

我注意到您的引导 CSS 和 JS 的版本号不匹配。我会将这些 CDN 与bootstrap 5 页面上提供的 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>

推荐阅读