在 Twitter Bootstrap 2.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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
我遇到了类似的问题,发现我的 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.
我在使用旋转木马时遇到了问题,但我让它工作了。现在我不知道如何让它在页面加载后自动循环浏览图像。
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.
您是否在页面中添加了转换库?是插件列表中的最后一个!
did you added the transistions lib in your page?? Is the last in the plugins list!
显然这是 Bootstrap 2.0.1 中的一个错误。亚历山大·波斯拉夫斯基在回答这个问题的另一个版本时给出的答案对我有用。
这是他的回答:
https://stackoverflow.com/a/9482845/1166287
要点 - 删除或注释掉 bootstrap 中的第 86 行 -轮播.js:
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:
我正在运行 bootstrap.js 中的代码(您也可以查看 bootstrap-carousel.js),这是因为如果您位于列表中的最后一项,则会返回幻灯片方法的代码。
如果你删除它就可以了:
就像 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:
Just like David Cochran said.
今天遇到同样的问题。我的解决方案:
我的问题:如何阻止轮播自动播放
having the same problem today. My solutions:
My question: how do i stop the carousel from autoplaying