5

我正在尝试将轮播添加到我的 Bootstrap 3 网站。使用的代码直接来自http://getbootstrap.com/javascript/#carousel。代码也没有记录，所以我不得不做出一些猜测。轮播只显示所有三个相互堆叠的图像。我相当确定我的 javascript 和 jQuery 正在工作，因为我有一个导航栏设置，它有工作的下拉菜单。

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
    <img src="http://placehold.it/1200x480" alt=“Slide 1”&gt;
      <div class="carousel-caption">
        <h1>Slide 1</h1>
        <p>Slide 1 Description</p>
      </div>
    </div>
  </div>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1200x480" alt=”Slide 2”&gt;
      <div class="carousel-caption">
        <h1>Slide 2</h1>
        <p>Slide to Description</p>
      </div>
    </div>
  </div>
  <div class="carousel-inner">
    <div class="item active">
    <img src="http://placehold.it/1200x480" alt=“Slide “3>
      <div class="carousel-caption">
        <h1>Slide 3</h1>
        <p>Slide 3 Description</p>
      </div>
    </div>
  </div>

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

编辑：我做了更多的工作（感谢回答的人），我想我明白了。幻灯片实际上是动画的，并且与我的一些尝试不同，它循环回到开头。希望就是这样。

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

    <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <!-- Slide 1-->
            <div class="item active">
                <img src="http://placehold.it/1200x480" alt="Slide 1" />
                <div class="carousel-caption">
                    <h1>Slide 1</h1>
                    <p>Slide 1 Description</p>
                </div>
            </div>

            <!-- Slide 2-->
              <div class="item">
                  <img src="http://placehold.it/1200x480" alt="Slide 2" />
                  <div class="carousel-caption">
                      <h1>Slide 2</h1>
                      <p>Slide 2 Description</p>
                  </div>
              </div>

          <!-- Slide 3-->
            <div class="item">
                <img src="http://placehold.it/1200x480" alt="Slide 3" />
                <div class="carousel-caption">
                    <h1>Slide 3</h1>
                    <p>Slide 3 Description</p>
                </div>
            </div>
          </div>


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

4 回答 4

8

如前所述，您的所有轮播项目都已标记为活动，并且这些项目被包装在不同的轮播内部类中。您只需要包装 carousel-inner 类中的项目，而不是包含 carousel-control 类的链接。为了自动轮播幻灯片，您需要包括：

$(function(){
  $('#carousel-example-generic').carousel();
});

检查此链接：更新的代码

于 2013-10-24T08:51:06.703 回答
4

您的所有幻灯片都被标记为活动...任何时候只有一张应该有活动课程。

你也有太多的轮播内部 div。所有幻灯片都需要包裹在一个旋转木马内层中。

于 2013-10-23T22:29:06.060 回答
3 
<div class="item active">

从除第一个以外的所有 div 中删除活动类

于 2014-09-25T06:16:42.457 回答
2

我今天遇到了同样的问题。我从http://getbootstrap.com下载了 bootstrap.min.css并使用了那个 css。那个css显示了这个问题。我将css源更改为 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ，它解决了问题。

于 2017-01-21T19:41:51.857 回答