Question

我想在本地使用轮播引导程序4，但是它不起作用，我还把文件bootstrap.min.css和bootstrap.min.js也放在了jquery.min.js中。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="container-fluid">
        <div class="carousel slide" data-ride="carousel" id="carousel">

           <ol class="carousel-indicators">
             <li data-target="#carousel" data-slide to="0" class="active"></li>
             <li data-target="#carousel" data-slide to="1"></li>
             <li data-target="#carousel" data-slide to="2"></li>
           </ol>

           <div class="carousel-inner">
             <div class="item active">
               <img src="img/index.jpg">
             </div>
             <div class="item">
               <img src="img/1index.jpg">
             </div>
             <div class="item">
               <img src="img/2index.jpg">
             </div>
          </div>

          <a class="carousel-control left" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="carousel-control right" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>

        </div> 
      </div>

   </div>
  </div>
</div>


</body>
</html>

Answer 1

几件事：

将类item更改为carousel-item，以使其正常工作
此外，正确的格式是data-slide-to而不是data-slide to
container-fluid为全角，将其嵌套在container下无济于事

下面的代码段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

      <div class="container-fluid">
        <div class="carousel slide" data-ride="carousel" id="carousel">

          <ul class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
          </ul>

          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://www.w3schools.com/bootstrap4/la.jpg">
            </div>
            <div class="carousel-item">
              <img src="https://www.w3schools.com/bootstrap4/ny.jpg">
            </div>
            <div class="carousel-item">
              <img src="https://www.w3schools.com/bootstrap4/chicago.jpg">
            </div>
          </div>

          <a class="carousel-control-prev left" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next right" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="carousel-control-next-icon"></span>
          </a>

        </div>
      </div>

    </div>
  </div>
</div>

为什么轮播无法在本地引导中工作？

1 个答案: