Question

我已经下载了一个bootstrap轮播模板，除旋转木马的控件外，一切正常。我可以看到控件，但是当我点击左侧或右侧控件时没有任何反应。任何帮助将非常感激。以下是（我认为）相关的代码行：

感谢您的帮助！

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
  <!-- 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>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <div class="carousel-caption">
        <h1>Bootstrap 1 Carousel Layout</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
    </div>
    <div class="carousel-inner">
      <div class="item">
        <div class="carousel-caption">
          <h1>Bootstrap 2 Carousel Layout</h1>
           <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
    </div>
    <div class="carousel-inner">
      <div class="item">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
           <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
    </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
</div>
<!-- /.carousel -->

这里是脚本引用：

<!-- script references -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/scripts.js"></script>

Answer 1

我认为您误解了文档。应该只有一个<div class="carousel-inner">。这是“项目”的包装。在这些指标和控件之间更改你的html，你应该取得更大的成功：

<div class="carousel-inner">
    <div class="item active">
      <div class="carousel-caption">
        <h1>Bootstrap 1 Carousel Layout</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
      <div class="item">
        <div class="carousel-caption">
          <h1>Bootstrap 2 Carousel Layout</h1>
           <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
      <div class="item">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
           <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
    </div>

此外，如果您希望轮播在加载时自动开始循环，您可以添加：data-ride="carousel"到最外层的div（具有您的ID的那个）

编辑：我忘了提及另一件事......

如果你没有在项目div中添加一些内容，你将看不到任何内容，甚至不会看到你的标题。那是因为标题设置在项目div的底部。如果你只想在没有内容的情况下测试一下，只需添加以下css以使项目div具有一定的高度（我还添加了背景颜色，因此白色文本将在白色背景下更好地显示）：

div.item {
  height: 500px;
  background-color: green;
}

Bootstrap轮播控件不起作用

1 个答案: