在Twitter Bootstrap Carousel中,我要如何让特定的幻灯片播放时间与其他幻灯片不同?使用“interval”参数可以更改整个滑动器的持续时间,但不知道如何为特定的幻灯片设置自定义时间。
<div class="carousel-inner">
<div class="active item" data-interval="3000">
<img src="Url 1" />
</div>
<div class="item" data-interval="6000">
<img src="Url 2" />
</div>
<div class="item" data-interval="9000">
<img src="Url 3" />
</div>
</div>
slid.bs.carousel
事件检测新项目何时显示.carousel('pause')
暂停轮播var t;
var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration = $(this).find('.active').attr('data-interval');
$('#myCarousel').carousel('pause');
t = setTimeout("$('#myCarousel').carousel();", duration-1000);
})
$('.carousel-control.right').on('click', function(){
clearTimeout(t);
});
$('.carousel-control.left').on('click', function(){
clearTimeout(t);
});
duration-1000
时都会将其删除。我使用以下行解决了第一项问题,因为该项未被slid event
捕获。var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);
carousel('pause')
起作用。 我尝试了所有可能的方法,它从未暂停过 - 只是继续运行循环。我的解决方案与你的非常相似,只是使用carousel('next')
以及setTimeout
和data-interval
属性。感谢您指导我朝着正确的方向前进。 - Andy Brudtkuhl您需要在主div中设置data-interval标签来设置间隔时间。这样它就可以正常工作,并且您可以为不同的幻灯片设置不同的时间。
<!--main div -->
<div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div role="listbox" class="carousel-inner">
<div class="item">
<a class="carousel-image" href="#">
<img alt="image" src="image.jpg">
</a>
</div>
</div>
</div>
在Bootstrap事件处理程序内,我完全不能使carousel('pause')
工作。 我不确定是什么原因 - 可能是由于使用KnockoutJS动态呈现幻灯片或者Bootstrap中的错误(我猜是我的代码造成的)。
因此,为了设置单个幻灯片的轮换时间间隔与其他幻灯片独立,我使用Bootstrap中上升的slid.bs.carousel
事件以及使用setTimeout
基于项目的data-interval
属性设置时间间隔,并手动调用carousel('next')
方法。
JS
// slide event
$('.carousel').on('slid.bs.carousel', function () {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
window.setTimeout(function() {
$('.carousel').carousel('next');
}, $(carouselData.$items[currentIndex]).data('interval'));
});
// init carousel
$('.carousel').carousel({
interval: false
});
// set initial timeout for active slide data-interval
window.setTimeout(function () {
$('.carousel').carousel('next');
}, $('.carousel .active').data('interval'));
HTML
<div class="carousel">
<div class="carousel-inner">
<div id="slide1" class="item active" data-interval="5000">{{content}}</div>
<div id="slide2" class="item" data-interval="10000">{{content}}</div>
<div id="slide3" class="item" data-interval="10000">{{content}}</div>
</div>
</div>
#slide1
将是你的轮播图中的初始幻灯片,并显示 5 秒钟。5 秒钟后,它将滑动到 #slide2
。
#slide2
将暂停 10 秒钟,然后滑动到 #slide3
。以此类推,循环往复...在“item”类元素中添加可选属性(data-interval)。
<div class="active item" data-interval="6000">
修改carousel.js
添加标志以确定第一个循环
var Carousel = function (element, options) { this.$element = $(element) this.$indicators = this.$element.find('.carousel-indicators') this.options = options this.paused = this.sliding = this.interval = this.$active = this.$items = null //[TODO Kevin] Added - BEGIN this.isFirstCycle= true //[TODO Kevin] Added - BEGIN
this.options.pause == 'hover' && this.$element .on('mouseenter', $.proxy(this.pause, this)) .on('mouseleave', $.proxy(this.cycle, this)) }
修改CYCLE函数
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
//[TODO Kevin] Modified - BEGIN
//this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
if (this.options.interval && !this.paused) {
var $active = this.$element.find('.item.active');
/**CUSTOM ITEM INTERVAL**/
if ($active.data('interval')) {
var customInterval;
/*On First Cycle*/
if(this.isFirstCycle) {
//Get ACTIVE ITEM interval
customInterval = $active.data('interval');
this.isFirstCycle = false;
/*On Suceeding Cycles*/
} else {
//Get NEXT ITEM interval
var $next = $active['next']();
if (!$next.length) {
if (!this.options.wrap) return this
$next = this.$element.find('.item')['first']()
}
customInterval = $next.data('interval');
}
this.interval = setInterval($.proxy(this.next, this), customInterval);
/**DEFAULT INTERVAL**/
} else {
this.interval = setInterval($.proxy(this.next, this), this.options.interval);
}
}
//[TODO Kevin] Modified - END
return this
}
样例:JS Fiddle