我正在使用Twitter bootstrap和轮播功能。标记如下所示。
我正在努力实现页面加载的功能, 1.旋转木马从第一张幻灯片开始并保持在那里(比方说500ms)。 然后它移动到幻灯片2并永远停止。
只有2张幻灯片,用户可以用箭头在它们之间移动,但这不应该触发幻灯片的不断循环。 (如果困难,这不太重要)。
我已尝试更改轮播控件,但我无法弄清楚:http://twitter.github.com/bootstrap/javascript.html#carousel
自:
<script type="text/javascript">
$('.carousel').carousel({
interval: 3000
})
</script>
到:
<script type="text/javascript">
$('.carousel').carousel({
interval: false
}).carousel(1).delay('500');
</script>
当我选择后一个选项时,旋转木板会在我按箭头后连续滚动,但通常不会。
我已经包含了我的轮播标记。希望这可以帮助。脑部比我的小豌豆大的人有什么想法或指针吗?
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="#" class="featurette">
<img class="featurette-image pull-right" width="200" height="200" src="en_200x200.png">
<h2 class="featurette-heading">Heading 1</h2><p class="lead muted">Strapline 1</p>
</a>
</div>
<div class="item">
<a href="#" class="featurette">
<img class="featurette-image pull-right" width="200" height="200" src="cloud.png">
<h2 class="featurette-heading">Heading 2</h2>
<p class="lead muted">Strapline 2</p>
</a>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<hr>
</div><!-- /.carousel -->
答案 0 :(得分:1)
你可以试试这个,不是100%肯定它会起作用,但值得一试。
此事件应在第一张幻灯片滑动后触发。然后应该暂停&#39;旋转木马。
$('#myCarousel').bind('slid', function() {
$(this).carousel('pause');
});
从这里的信息拼凑而成:
http://twitter.github.com/bootstrap/javascript.html#carousel
答案 1 :(得分:0)
我得到了解决方法:P open bootstrap.js转到行号275看起来像
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
现在将其设置为true并且轮播将暂停
this.options.pause ==true
答案 2 :(得分:0)
Twitter Bootstrap v3.0.3
// initialize carousel
$('.carousel.slide').carousel();
// stop sliding the carousel after clicking next/prev button
$(document).on('slide.bs.carousel', '.carousel.slide', function () {
$(this).carousel('pause');
});