Bootstrap Carousel 按钮在 atom 中不起作用答案

【问题标题】：Bootstap Carousel button not working in atomBootstrap Carousel 按钮在 atom 中不起作用
【发布时间】：2022-08-17 17:17:38
【问题描述】：

我在旋转木马上工作，但按钮不起作用并且它有边框。尝试使用 css 删除边框，但这次按钮也消失了。

按钮正在使用 codeply：bootstrap carousel buttons

/* html tags */
body {
  font-family: \"Montserrat\";
  font-weight: 900;
}
h2 {
  font-family: \"Montserrat\";
  font-size: 3rem;
  line-height: 1.5;
}
.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}
/* Testimonials Sections */
#testimonials {
  padding: 7% 15%;
  text-align: center;
  background-color: #ef8172;
  color: #fff;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset=\"utf-8\">
  <title>TinDog</title>
  <!--Bootstrap-->
  <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://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"></script>
  <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>
  rel=\"stylesheet\">
   <!--Font Awesome-->
  <script src=\"https://kit.fontawesome.com/4c02f86903.js\" crossorigin=\"anonymous\"></script>
  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">
  <link rel=\"stylesheet\" href=\"css/styles.css\">
</head>

<body>
  <section id=\"testimonials\">
    <div id=\"testimonial-carousel\" class=\"carousel slide\" data-bs-ride=\"false\">
      <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 src=\"images/dog-img.jpg\" class=\"testimonial-image\" alt=\"dog-profile\">
          <em>Pebbles, New York</em>
        </div>
        <div class=\"carousel-item\">
          <h2 class=\"testimonial-text\">My dog used to be so lonely, but with TinDog\'s help, they\'ve found the love of their life. I think.</h2>
          <img src=\"images/lady-img.jpg\" class=\"testimonial-image\" alt=\"lady-profile\">
          <em>Beverly, Illinois</em>
        </div>
      </div>
      <button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#testimonial-carousel\" data-bs-slide=\"prev\">
        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
      </button>
      <button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#testimonial-carousel\" data-bs-slide=\"next\">
        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
      </button>
    </div>
  </section>
</body>

是否有必要在头部添加一些额外的东西？我想不出解决方案

标签： bootstrap-carousel

【解决方案1】：

问题在于 Bootstrap 的导入。您已包含 Bootstrap 版本 4.3.1，但使用了 Bootstrap 5+ 的 html 语法。您还两次包含了 js。

更正的代码（包括您的自定义 CSS）：

body {
  font-family: "Montserrat";
  font-weight: 900;
}

h2 {
  font-family: "Montserrat";
  font-size: 3rem;
  line-height: 1.5;
}

.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}

/* Testimonials Sections */
#testimonials {
  padding: 7% 15%;
  text-align: center;
  background-color: #ef8172;
  color: #fff;
}

.carousel-item {
  height: 500px;
}

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
  </head>

  <body>
    <section id="testimonials">
      <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
        <div class="carousel-inner">
          <div class="carousel-item active" style="background-color:blue;">
            <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
            <img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
            <em>Pebbles, New York</em>
          </div>
          <div class="carousel-item" style="background-color:red;">
            <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
            <img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
            <em>Beverly, Illinois</em>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </button>
      </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

您需要在此处添加样式表，否则应该可以正常工作。

【讨论】：