在 Twitter Bootstrap 2.0 中控制轮播

发布于 2025-01-03 00:31:07 字数 1317 浏览 4 评论 0原文

我正在测试 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()

并且可以正常工作。但是,当您单击图像时,箭头不会移动/循环浏览图像。

我确信我错过了一些简单的事情。感谢您的帮助。

I'm testing out the new carousel feature in bootstrap 2.0 and having difficulties making the nav arrows function correctly. The documentation is a little thin at the moment and i'm a newbie of sorts.

This is my 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">‹</a>

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


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

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

I've activated the carousel in javascript:

$('#myCarousel').carousel()

and that works. However the arrows don't move / cycle through the images when you click on them.

I'm sure it's something simple i'm missing. Thanks for your help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

单身狗的梦 2025-01-10 00:31:07

我遇到了类似的问题,发现我的 jQuery 版本已经过时了。也许请确保您正在运行最新版本,Bootstrap 文档目前正在运行版本 1.7.1。更新到 1.7.1 后,“下一步”和“上一步”按钮工作正常。

I had a similar problem and discovered my version of jQuery was outdated. Perhaps make sure you are running the latest version, the Bootstrap Docs are running version 1.7.1 at present. After updating to 1.7.1 the Next and Previous buttons worked fine.

银河中√捞星星 2025-01-10 00:31:07

我在使用旋转木马时遇到了问题,但我让它工作了。现在我不知道如何让它在页面加载后自动循环浏览图像。

I was having problems with the carousel but i got it to work. now i cant figure out how to make it automatically cycle through the images after the page loads.

笑忘罢 2025-01-10 00:31:07

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

did you added the transistions lib in your page?? Is the last in the plugins list!

花开浅夏 2025-01-10 00:31:07

显然这是 Bootstrap 2.0.1 中的一个错误。亚历山大·波斯拉夫斯基在回答这个问题的另一个版本时给出的答案对我有用。

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

要点 - 删除或注释掉 bootstrap 中的第 86 行 -轮播.js:

if (!$next.length) return

Apparently this was a bug in Bootstrap 2.0.1. The answer given by Alexander Poslavsky in answer to another version of this question, worked for me.

Here is his answer:
https://stackoverflow.com/a/9482845/1166287

The gist -- delete or comment out line 86 in bootstrap-carousel.js:

if (!$next.length) return
无人问我粥可暖 2025-01-10 00:31:07

我正在运行 bootstrap.js 中的代码(您也可以查看 bootstrap-carousel.js),这是因为如果您位于列表中的最后一项,则会返回幻灯片方法的代码。

如果你删除它就可以了:

if (!$next.length) return

就像 David Cochran 说的那样。

I was running through code in bootstrap.js (you can also look in bootstrap-carousel.js), and it's because the code for the slide method returns if you're on the last item in the list.

It works fine if you remove:

if (!$next.length) return

Just like David Cochran said.

听风念你 2025-01-10 00:31:07

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

  • 必须使用 jQuery 1.7.1(而不是 1.6.4)
  • 必须包含 bootstrap-transition.js

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

having the same problem today. My solutions:

  • had to use jQuery 1.7.1 (and not 1.6.4)
  • had to include bootstrap-transition.js

My question: how do i stop the carousel from autoplaying

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文