Bootstrap轮播,自动循环然后停止
我正在使用twitter bootstrap和轮播function。 标记如下所示。
我试图在页面加载时实现一些东西,1。旋转木马在第一张幻灯片上开始并保持在那里(比方说500ms)。 然后它移动到幻灯片2并永远停止。
只有2张幻灯片,用户可以使用箭头在它们之间移动,但这不应该触发幻灯片的持续循环。 (如果困难,这不太重要)。
我已经尝试过更改旋转木马控件,但我无法弄明白: http : //twitter.github.com/bootstrap/javascript.html#carousel
从:
$('.carousel').carousel({ interval: 3000 })
至:
$('.carousel').carousel({ interval: false }).carousel(1).delay('500');
当我选择后一个选项时,旋转木板会在我按箭头后连续滚动,但通常不会。
我已经包含了我的旋转木马标记。 希望这可以帮助。 脑部比我的小豌豆大的人有什么想法或指针吗?
你可以试试这个,不是100%肯定它会起作用,但值得一试。
在第一张幻灯片“滑动”之后该事件应该触发,然后应该“暂停”旋转木马。
$('#myCarousel').bind('slid', function() { $(this).carousel('pause'); });
从这里的信息拼凑而成:
http://twitter.github.com/bootstrap/javascript.html#carousel
我得到了这个解决方案:P open boostrap.js转到第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
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