引导轮播，自动循环然后停止答案

【问题标题】：Bootstrap carousel, auto cycle then stop引导轮播，自动循环然后停止
【发布时间】：2014-04-10 14:18:54
【问题描述】：

我正在使用 twitter 引导程序和轮播功能。标记如下所示。

我正在尝试在页面加载时实现某些目标， 1. 轮播从第一张幻灯片开始并保持在那里（比如说 500 毫秒）。 2. 然后它移动到幻灯片 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">&lsaquo;</a>
                  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
                  <hr>


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

【问题讨论】：

对不起，我不太清楚你想要的行为。您是说希望轮播在第二张图片上停止，还是当前正在发生的情况并且您想修复它？
我希望它显示第一张图像 500 毫秒，然后移动到第二张图像并停止。这说明清楚了吗？我也会编辑问题
@matt 间隔选项显然适用于骑自行车。有没有想过简单的setTimeout？
这就是我想要的。将间隔设置为“假”，使其不会循环，然后以 500 毫秒的延迟移动到幻灯片 ID=1。我将如何使用 setTimeout？抱歉 - jquery 知识真的很有限

标签： jquery html css twitter-bootstrap

【解决方案1】：

你可以试试这个，不是 100% 肯定它会起作用，但值得一试。

此事件应在第一张幻灯片“滑动”后触发，然后应“暂停”轮播。

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

根据这里的信息拼凑而成：

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

【讨论】：

【解决方案2】：

我得到了这个的解决方案：P open boostrap.js goto line number 275 看起来像

this.options.pause == 'hover' && this.$element
  .on('mouseenter', $.proxy(this.pause, this))
  .on('mouseleave', $.proxy(this.cycle, this))

现在将其设置为 true 并暂停轮播

this.options.pause ==true

【讨论】：

【解决方案3】：

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');
});

jsfiddle

【讨论】：