Question

猜猜这是一个很长的问题。我在w3上看过this bootstrap carousel，我正试图在我的网站上实现它，但似乎有问题。而不是像"Tryit Editor"那样工作，图像只是以没有图像可以滑动的方式添加到网站。它们就在网页上，而不是彼此改变。希望我足够清楚。

这是我在网站上粘贴的代码。请注意，我已经将标签放在head上以链接到w3 css和js页面，并且我已经将图像链接更改为我想要在旋转木马中的一些图像。

<head>
    <!-- carousel head -->
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- carousel -->

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>

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

  <div class="item active">
      <img src="img/foto1.jpg" style = "width: 100%;">
    </div>

  <div class="item active">
      <img src="img/foto2.jpg">
    </div>

    <div class="item active">
      <img src="img/foto3.jpg">
    </div>

<!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>

Answer 1

从第二和第三项div中删除活动类。并在</div>之前添加另一个。

Carousel只是将图像上传到网站而无需更改

1 个答案: