html 中的轮播正在显示堆叠图片。不滚动

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">的class错了。它在 innner 上有 3×n。正确的是<div class="carousel-inner">.

html 中的轮播正在显示堆叠图片。不滚动

Carousel in html is showing stacked picture. Not scrolling

html

javascript

jquery

carousel