1

我正在使用 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 -->
4

3 回答 3

1

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

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

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

从这里的信息拼凑而成：

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

于 2013-02-07T14:37:50.653 回答
0

推特引导 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

于 2014-04-10T06:18:54.053 回答
0

我得到了这个的解决方案：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 并且 carousal 将暂停

this.options.pause ==true
于 2013-11-20T06:55:53.110 回答