Bootstrap传送带，然后自动循环停止

我使用twitter bootstrap和传送带功能。标记如下所示。Bootstrap传送带，然后自动循环停止

我想在页面加载时实现某些功能， 1.旋转木马从第一张幻灯片开始并保持在那里（可以说500毫秒）。 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 -->

来源

2013-02-07 matt

对不起，我不是您想要的行为很清楚。你是说你想让旋转木马停在第二张图片上，或者说目前正在发生，你想修复它吗？ –

我想让它显示500ms的第一张图片，然后移动到第二张图片并停下来。这说明了吗？我也会编辑这个问题 – matt

@matt interval选项显然是用于骑车的。你有没有想过一个简单的'setTimeout'？ – Sherbrow

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

此事件应在第一张幻灯片'滑动'并应该'暂停'旋转木马后触发。

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

从这里的信息拼凑起来：

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

来源

2013-02-07 14:37:50

我得到了这个解决方案：P开放boostrap.js转到行号275看起来像

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

现在设置它真的和carousal将被暂停

this.options.pause ==true

来源

2013-11-20 06:55:53

Twitter的引导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-10 06:18:54 ramiz4

Bootstrap传送带，然后自动循环停止

回答

相关问题