为什么我的 Bootstrap 4 Carousel 没有出现？

Question

我相信我正确地从 Boostrap 4 (v4.5) 复制并粘贴了轮播代码，我还包含了 Bootstrap cdn 以及 JavaScript、JQuery , Popper.js 个插件在 .虽然 Bootstrap 4 导航栏效果很好，但我不明白为什么轮播不显示。为了让轮播正常工作，我还需要添加什么吗？

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- bootstrap cdn  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- fontawesome cdn -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
      integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

    <!-- custom css  -->
    <link rel="stylesheet" href="indexStyle.css">

    <title>BLANK</title>
  </head>

  <body>
    <!-- Design the navbar  -->
    <nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
      <a href="main.html" class="navbar-brand"><i class="fas fa-pencil-ruler mr-2"></i>BLANK</a>
      <!-- hamburger menu when shrinked -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="colapse navbar-collapse" id="navLinks">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              ABOUT
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a href="about.html" class="dropdown-item">ABOUT US</a>
              <a href="#" class="dropdown-item">OUR TEAM</a>
              <a href="#" class="dropdown-item">OUR MISSION</a>
              <a href="#" class="dropdown-item">CONTACT US</a>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link mr-2">PARENTS/GUARDIANS</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link mr-2">STUDENTS</a>
          </li>
        </ul>
      </div>
    </nav>

    <section>
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ul class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ul>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="slide1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="slide2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="slide3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>

    <!-- Mid Section  -->
    <div class="container text-center">
      <h3 class="display-5" id="big-title">A New Way of Learning</h3>
      <p>Join us for free exclusive free classes</p>
    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>

</html>

Answer 1

您是否尝试过将脚本放在页面的头部？我已经用我的图像尝试过相同的代码并且它们有效

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap cdn  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  

    <!-- fontawesome cdn -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
        integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
      <!-- custom css  -->
      <link rel="stylesheet" href="indexStyle.css">
    
      <title>BLANK</title>
    </head>

    <body>
      <!-- Design the navbar  -->
      <nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
        <a href="main.html" class="navbar-brand"><i class="fas fa-pencil-ruler mr-2"></i>BLANK</a>
        <!-- hamburger menu when shrinked -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="colapse navbar-collapse" id="navLinks">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                ABOUT
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a href="about.html" class="dropdown-item">ABOUT US</a>
                <a href="#" class="dropdown-item">OUR TEAM</a>
                <a href="#" class="dropdown-item">OUR MISSION</a>
                <a href="#" class="dropdown-item">CONTACT US</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link mr-2">PARENTS/GUARDIANS</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link mr-2">STUDENTS</a>
            </li>
          </ul>
        </div>
      </nav>
    
      <section>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="slide1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="slide2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="slide3.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </section>
    
      <!-- Mid Section  -->
      <div class="container text-center">
        <h3 class="display-5" id="big-title">A New Way of Learning</h3>
        <p>Join us for free exclusive free classes</p>
      </div>

</body>

</html>

Answer 2

您的代码正在运行。它在下面工作。 Bootstrap 4 如果您的图片 src 无效，Carrousel 将不会显示。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap cdn  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <!-- fontawesome cdn -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
    integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

  <!-- custom css  -->
  <link rel="stylesheet" href="indexStyle.css">

  <title>BLANK</title>
</head>

<body>
  <!-- Design the navbar  -->
  <nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
    <a href="main.html" class="navbar-brand"><i class="fas fa-pencil-ruler mr-2"></i>BLANK</a>
    <!-- hamburger menu when shrinked -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="colapse navbar-collapse" id="navLinks">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            ABOUT
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a href="about.html" class="dropdown-item">ABOUT US</a>
            <a href="#" class="dropdown-item">OUR TEAM</a>
            <a href="#" class="dropdown-item">OUR MISSION</a>
            <a href="#" class="dropdown-item">CONTACT US</a>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mr-2">PARENTS/GUARDIANS</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mr-2">STUDENTS</a>
        </li>
      </ul>
    </div>
  </nav>

  <section>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://www.ahtcloud.com/images/ahttms.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </section>

  <!-- Mid Section  -->
  <div class="container text-center">
    <h3 class="display-5" id="big-title">A New Way of Learning</h3>
    <p>Join us for free exclusive free classes</p>
  </div>


  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

为什么我的 Bootstrap 4 Carousel 没有出现？

Why my Bootstrap 4 Carousel doesn't show up?

html

javascript

css

bootstrap-carousel

bootstrap-4