引导程序4的轮播无法实施

编程问答 2022-07-27

问题描述

我已经使用Bootstrap 4编写了以下有关轮播的代码。我已经附加了代码。但是，即使有控件，我也无法将其他幻灯片带入图片。我想知道代码有什么问题。

carousel.js 

<html>

<head>
    <title> Carousel</title>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <title>Carousel</title>
    <style>
    </style>
</head>

<body>


    <div class="container">
        <h2>Carousel Example</h2>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

            <!-- Wrapper for slides -->
            <div class="carousel-inner">

                <div class="carousel-item active">
                    <img  class="d-block w-100" src="Desert.jpg" alt="Desert" style="width:100%;">
                   
                </div>

                <div class="carousel-item">
                    <img  class="d-block w-100" src="Hydrangeas.jpg" alt="Hydrangeas" style="width:100%;">
                    
                </div>

                <div class="carousel-item">
                    <img class="d-block w-100" src="Jellyfish.jpg" alt="Jellyfish" style="width:100%;">
                    
                </div>

            </div>

            <!-- Left and right controls -->
            <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>
    </div>
</body>

</html>

解决方法

您没有添加Bootstrap JavaScript plugins，因此轮播的滑动行为代码不可用。您必须至少将以下<script>添加到<head>：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

您的工作示例： 

<html>
  <head>
    <title> Carousel</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
    
    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <h2>Carousel Example</h2>
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

        <!-- wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://placehold.it/100x101" alt="Desert" style="width:100%;">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://placehold.it/100x102" alt="Hydrangeas" style="width:100%;">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://placehold.it/100x103" alt="Jellyfish" style="width:100%;">
          </div>
        </div>

        <!-- left and right controls -->
        <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>
    </div>
  </body>
</html>

bootstrap-4carouseljavascript