引导转盘，自动循环然后停止 [英] Bootstrap carousel, auto cycle then stop

问题描述

我使用twitter启动和轮播功能。标记如下所示。

I'm using twitter bootstrap and the carousel feature. The markup is shown below.

我试图在页面加载时实现某种东西，
1.旋转木马从第一张幻灯片开始，并保持在那里（让我们说500ms）。
2.然后它移动到幻灯片2，并永远停止。

I'm trying to achieve something where on page load, 1. the carousel starts on the first slide and holds there (lets say 500ms). 2. Then it moves to slide 2 and stops forever.

只有2个幻灯片，用户可以使用箭头在它们之间移动，但这不应该触发幻灯片的不断循环。 （这不是太重要，如果困难）。

There are only 2 slides and the user could move between them with the arrows, but this shouldn't trigger constant cycling of slides. (this is not too important if difficult).

我已尝试更改轮播控制，但我不能完全弄清楚： http://twitter.github.com/bootstrap/javascript.html#carousel

I've tried changing the carousel controls as per but I can't quite figure it out: 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>

当我做后一个选项时，转盘连续滚动，一旦我按箭头，一般。

when I do the latter option, the carousel rolls continuously once I press an arrow, but not at all normally.

我已经加入了轮播标记。希望这可以帮助。

I've included my carousel markup. Hope this helps. Anyone with a bigger brain than my little pea have any ideas or pointers?

<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">&lsaquo;</a>
                  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
                  <hr>


                </div><!-- /.carousel -->    

推荐答案

此事件应在第一张幻灯片滑动之后触发，然后暂停旋转木马。

This event should fire after the first slide has 'slid' and should then 'pause' the carousel.

$('#myCarousel').bind('slid', function() {
    $(this).carousel('pause');
});​

从这里的信息拼凑在一起：

Cobbled together from the information here:

http://twitter.github.com/bootstrap /javascript.html#carousel

这篇关于引导转盘，自动循环然后停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！