logo标签列表

Bootstrap轮播不起作用（同时显示所有图片）

javascriptjqueryhtmlcsstwitter-bootstrap
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”>
      <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>
4个回答
8

如先前所述，您的走马灯项目已被标记为活动状态，并且这些项目包含在不同的carousel-inner类中。 您只需要将包含在carousel-inner类中的项目进行包装，而不是包含carousel-control类的链接。 为了使走马灯自动滑动，您需要包含以下内容：

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

请查看此链接：更新的代码

。

你的代码为什么在幻灯片切换时没有显示滑动动画？ - user2333842
这是因为我没有图像源，所以它显示在alt属性中，即slide1、slide2... - Rohitha
@Rohitha，你的修复救了我的一天。终于在经过两天之后，我的轮播图可以正常工作了。 - Swanand Pangam
4
你所有的幻灯片都被标记为活动状态... 在任何时候只有一个应该带有活动类。
你也有太多的carousel-inner div。所有的幻灯片都需要包裹在一个carousel-inner中。
3
<div class="item active">

从所有的div中移除active类，但第一个除外。
2
谢谢！哇，没想到预构建的bootstrap.min.css会有问题。 - DivineOps
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接