引导轮播在最后一张幻灯片后消失答案

【问题标题】：Bootstrap carousel dissapearing after last slide引导轮播在最后一张幻灯片后消失
【发布时间】：2013-11-01 13:14:13
【问题描述】：

好吧，这是最近发生的，我不太清楚为什么。所以我正在使用引导轮播，这是解释它的最佳方式：有 2 张幻灯片，用户在第二张幻灯片上，如果他们单击 > glyphicon 转到下一张幻灯片，整个轮播就会消失（因为没有幻灯片）我该如何解决这个问题？这是我当前的标记：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <div style="margin-left: 2em" class="carousel-indicators">
    &nbsp;&nbsp;
  </div>
  <div class="carousel-inner">
    <div class='item active'>
      <img src='' alt='Updates + Helper rank' />
      <div class='container'>
        <div class='carousel-caption'>
          <h1>
            Updates + Helper rank
          </h1>
          <p>
            text here
          </p>
        </div>
      </div>
    </div>
    <div class='item'>
      <img src='' alt='Website Updates &amp; News Prune' />
      <div class='container'>
        <div class='carousel-caption'>
          <h1>
            Website Updates &amp; News Prune
          </h1>
          <p>
            text here
          </p>
        </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>
</div>

谢谢！

编辑：还想知道是否有人知道我可以如何阻止它自动滑动？

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

问题是您的 .carousel-inner 容器内有轮播控件，而它们应该在外面。也没有必要在标题中使用.container 元素。最后，为了避免轮播自动循环，您可以将data-interval 属性设置为"false"。

修改后的标记应如下所示：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <div style="margin-left: 2em" class="carousel-indicators">&nbsp;&nbsp;</div>
    <div class="carousel-inner">
        <div class='item active'>
            <img src='http://placehold.it/500x300' alt='Updates + Helper rank' />
            <div class='carousel-caption'>
                 <h1>
            Updates + Helper rank
          </h1>

                <p>text here</p>
            </div>
        </div>
        <div class='item'>
            <img src='http://placehold.it/500x300' alt='Website Updates &amp; News Prune' />
            <div class='carousel-caption'>
                 <h1>Website Updates &amp; News Prune</h1>
                <p>text here</p>
            </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>

这是一个working demo

【讨论】：

【解决方案2】：

我无法准确指出哪里出了问题，但我很可能是因为 HTML 标记错误。我建议从头开始重建它，看看你是否可以修复它。您可以获取 Bootstrap courasoul here 的完整代码示例。首先尝试插入示例代码，以将问题缩小到您的 HTML 代码或其他内容。

您可以通过将 inverval 设置为 false 来停止自动滑动：

$('.carousel').carousel({
  interval: false
})

【讨论】：