Bootstrap Carousel无法工作(一次显示所有图像)

Question

我正在尝试在我的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”>
      <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”>
      <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>

Answer 1

如前所述,您的所有旋转木马物品都已标记为活动状态,这些物品包裹在不同的旋转木马内部类别中.您只需要在carousel-inner类中包装项目,而不包含包含carousel-control类的链接.为了旋转木马自动滑动,您需要包括:

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

检查此链接:更新了代码