引导轮播不循环回到第一张幻灯片答案

【问题标题】：Bootstrap carousel not cycling back to first slide引导轮播不循环回到第一张幻灯片
【发布时间】：2014-03-19 06:31:30
【问题描述】：

在这里寻求帮助。我的 Bootstrap 3 轮播和 wordpress（在我的本地）出现了一些非常奇怪的行为。我有四个图像幻灯片，所有四个都正确显示并正确滑动。但是，当我到达最后一张幻灯片并前进时，轮播不会循环回到第一张幻灯片，而是添加了另一张幻灯片，该幻灯片没有内容，只有 Prev 和 Next 箭头。如果我在这一点上前进，下一张幻灯片是一个单一的薄色块。在这一点上，无论前进还是后退，我都无法回到实际的幻灯片。我很茫然，准备砍掉我的电脑。这是我的代码：

<div class="col-md-8">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image1.jpg" alt="">
<div class="carousel-caption">
<h2>Boys swimming win division championship</h2>
<p>By the time the Division I championships started on the morning of February 1, the RM boys swim team...<a href="#">Read More...</a></p>
</div>
</div>
<div class="item">
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image2.jpg" alt="">
<div class="carousel-caption">
<h2>RM poms places on top</h2>
<p>One hour later in Rockville, the Rockets' poms team sat hand in hand and took a deep breath...<a href="#">Read More...</a></p>
</div>
</div>
<div class="item">
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image3.jpg" alt="">
<div class="carousel-caption">
<h2>O'Malley voices opposition to weed legalization</h2>
<p>The legalization of marijuana has become a point of interest...<a href="#">Read More...     </a></p>
</div>
</div>
<div class="item">
<img src="http://localhost:8888/wordpress/wp-content/themes/RMTide/images/image4.jpg" alt="">
<div class="carousel-caption">
<h2>Down to the Wire:</h2>
<p>Seven days until the state championship...<a href="#">Read More...</a></p>
</div>
</div>
</div>

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

这是我的脚本 $('.carousel').carousel({ 间隔：假 }); 非常感谢任何帮助。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

我遇到了同样的问题（本地和远程）。我正在使用 Roots Theme 并且基本上从 Bootstrap 站点示例中复制了 Carousel 源代码。我发现 WordPress 在源代码中插入了开放式 P 标签，因此我通过基于 Web 的 HTML 压缩器（缩小器）。重新粘贴回 WP 并修复。

【讨论】：