Question

我坐了几个小时看着这段代码，想知道为什么它只是显示堆积的图片而不是工作的旋转木马。也许我错过了什么。请帮忙。我的代码在下面

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>

     <div id="Carousel" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to ="0" class="acive"></li>
        <li data-target="#Carousel" data-slide-to ="1"></li>
        <li data-target="#Carousel" data-slide-to ="2"></li>
      </ol>

    <div class="carousel-innner">
      <div class= "item active">
        <img src="power_ranger.jpg" alt="yeah" class="img-responsive">
      </div>

      <div class= "item">
        <img src="jet.jpg" alt="yeah1" class="img-responsive">
      </div>

      <div class= "item">
        <img src="jl.png" alt="yeah1" class="img-responsive">
      </div>
    </div>

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

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

尝试使用carousel-item和item，但都失败了。问题可能在哪里？

Answer 1

您的代码中有2个错误。

首先，一个小错误是你的<div id="Carousel" class="carousel slide">元素永远不会关闭。

但这并不是旋转木马不工作的原因......

因此，我发现非常有趣的第二个错误是<div class="carousel-innner">的类错了。它在n上有3×innner。正确的是<div class="carousel-inner">。

在HTML中的旋转木马显示堆积的图片。不滚动

1 个答案: