Question

Bootstrap旋转木马在第二张幻灯片后消失，然后再次出现。它需要一个容器吗？或者图书馆有冲突吗？

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://www.sagu.edu/templates/sagu-redux/img/showcase-3.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Sign up today</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://www.sagu.edu/templates/sagu-redux/img/showcase-2.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Learn more</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://www.sagu.edu/templates/sagu-redux/img/showcase-5.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Answer 1

从您的每件商品中删除<div class="container">和相应的结尾</div>，包括来自有效商品的商品。不需要这种额外的语法。请参阅Twitter Bootstrap Documentation -v3提供的示例语法：

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

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

如果您仍然遇到问题，请尝试重构您的语法以匹配文档。例如，它包括carosel-indicators ol div来定义旋转木马中的图像。

以下jsfiddle显示您的轮播正常工作。从小提琴开始，我也调用transition.js并注意carousel.js的版本是3.2（不是2.3.2，你可能正在使用它）。还值得检查您是否使用了最新的bootstrap.min.css文件。对于小提琴，我使用来自Twitter Bootstrap CDN的jQuery 1.11.0，bootstrap.min.css，transition.js和carousel.js。您可以从这个小提琴中看到如何使右箭头和左箭头看起来更像您想要的描述。

Answer 2

我注意到你忘记了第一个div中的data-ride="carousel"。我不知道这是否会有所帮助，但值得一试。 Bootstrap's example for reference.

Bootstrap Carousel消失了

2 个答案: