Question

我正在处理html / css的noobie挑战，但似乎无法使轮播进入下一张幻灯片。据我所知，引导程序已链接（因为当我删除链接时，它会完全转换页面。）知道会发生什么吗？

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Coding Bootcamp Testimonials Slider</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="css.css">
</head>

<body>
  <!--Layer 0-->
  <div class="level-0">
    <div class="quote">
      <img class="quote-image" src="images\pattern-quotes.svg" alt="">
    </div>
    <div class="curve">
      <img class="curve-image" src="images\pattern-curve.svg" alt="">
    </div>
    <div class="bg">
      <img class="bg-image" src="images\pattern-bg.svg" alt="">
    </div>
  </div>

  <!--layer 1-->
  <div class="level-1">
    <div id="testimonials" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <p>
            “ I’ve been interested in coding for a while but never taken the jump, until now.
            I couldn’t recommend this course enough. I’m now in the job of my dreams and so
            excited about the future. ”

            Tanya Sinclair UX Engineer
          </p>
          <img class="image" src="images\image-tanya.jpg" alt="">
        </div>
        <div class="carousel-item">
          <p>
            “ If you want to lay the best foundation possible I’d recommend taking this course.
            The depth the instructors go into is incredible. I now feel so confident about
            starting up as a professional developer. ”

            John Tarkpor Junior Front-end Developer
          </p>
          <img class="image" src="images\image-john.jpg" alt="">
        </div>
      </div>
      <a class="carousel-control-prev" href="#testimonials" 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="#testimonials" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Aaron McDonald</a>.
  </div>
</body>

</html>

提前感谢您的帮助！

Answer 1

不太清楚你的意思是...

删除链接，它会完全转换页面。

但是使用您提供的代码，通过添加Bootstrap 4's javascript files，您的轮播会很好用。

在下面的演示中忽略我的css和其他html，但是在代码中包含javascript会使轮播进入下一张幻灯片。

BODY {
  background: black !important;
  color: white !important;
}

.carousel-control-prev {
  left: -15% !important;
}

.carousel-control-next {
  right: -15% !important;
}

<div class="row justify-content-center p-4">
  <div class="col-8">

    <!--layer 1-->
    <div class="level-1">
      <div id="testimonials" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <p>
              “ I’ve been interested in coding for a while but never taken the jump, until now. I couldn’t recommend this course enough. I’m now in the job of my dreams and so excited about the future. ” Tanya Sinclair UX Engineer
            </p>
            <img class="image" src="images\image-tanya.jpg" alt="">
          </div>
          <div class="carousel-item">
            <p>
              “ If you want to lay the best foundation possible I’d recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer. ” John Tarkpor Junior Front-end Developer
            </p>
            <img class="image" src="images\image-john.jpg" alt="">
          </div>
        </div>
        <a class="carousel-control-prev" href="#testimonials" 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="#testimonials" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Aaron McDonald</a>.
    </div>

  </div>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Answer 2

只需在代码中添加以下几行，即可正常运行。缺少Javascript。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

引导轮播无法进行

2 个答案: