在 Twitter Bootstrap 2.0 中控制轮播答案

【问题标题】：Controlling Carousel in Twitter Bootstrap 2.0在 Twitter Bootstrap 2.0 中控制轮播
【发布时间】：2012-02-06 10:13:01
【问题描述】：

我正在测试 bootstrap 2.0 中的新轮播功能，但难以使导航箭头正常工作。目前文档有点薄，我是新手。

这是我的html：

<div class="span9">

<div id="myCarousel" class="carousel slide">

  <!-- Carousel items -->
  <div class="carousel-inner">

  <div class="item active">

  <img src="img/testa.jpeg">

  <div class="carousel-caption">

  <h4>First Thumbnail label</h4>
  <p>Blah Blah Blah</p>

  </div><!-- Carousel caption -->

  </div><!-- items -->

  <div class="item">

  <img src="img/testb.jpeg">

  <div class="carousel-caption">

  <h4>First Thumbnail label</h4>
  <p>Blah Blah Blah</p>

  </div><!-- Carousel caption -->

  </div><!-- items -->

  </div><!-- Carousel inner -->

  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>


  </div><!-- Carousel -->

</div><!-- span -->

我已经在 javascript 中激活了轮播：

$('#myCarousel').carousel()

这行得通。但是，当您单击它们时，箭头不会在图像中移动/循环。

我确定这是我缺少的一些简单的东西。谢谢你的帮助。

【问题讨论】：

标签： jquery twitter-bootstrap jcarousel

【解决方案1】：

我遇到了类似的问题，发现我的 jQuery 版本已经过时了。也许确保您运行的是最新版本，Bootstrap Docs 目前运行的是 1.7.1 版本。更新到 1.7.1 后，Next 和 Previous 按钮工作正常。

【讨论】：

【解决方案2】：

我遇到了旋转木马的问题，但我让它工作了。现在我不知道如何让它在页面加载后自动循环显示图像。

【讨论】：

【解决方案3】：

您是否在页面中添加了转换库？是插件列表中的最后一个！

【讨论】：

是的 - 我已链接到 js/bootstrap-transition.js。不过，这似乎不是。轮播确实循环照片，但导航不起作用...
也许有人可以解释一下这是如何工作的：‹

【解决方案4】：

显然这是 Bootstrap 2.0.1 中的一个错误。 Alexander Poslavsky 在回答这个问题的另一个版本时给出的答案对我有用。

这是他的回答： https://stackoverflow.com/a/9482845/1166287

要点——删除或注释掉 bootstrap-carousel.js 中的第 86 行：

if (!$next.length) return

【讨论】：

【解决方案5】：

我正在运行 bootstrap.js 中的代码（您也可以查看 bootstrap-carousel.js），这是因为如果您位于列表中的最后一项，则 slide 方法的代码返回。

如果你删除它会正常工作：

if (!$next.length) return

就像大卫·科克伦所说的那样。

【讨论】：

【解决方案6】：

今天遇到同样的问题。我的解决方案：

必须使用 jQuery 1.7.1（而不是 1.6.4）
必须包含 bootstrap-transition.js

我的问题：如何阻止轮播自动播放

【讨论】：