Question

在Twitter Bootstrap Carousel中，如何让特定幻灯片的持续时间与其他幻灯片不同？

我可以使用“interval”参数更改整个滑块持续时间，但不知道如何为特定幻灯片设置自定义持续时间。

Answer 1

Bootstrap 3.1轮播不允许每张幻灯片有不同的持续时间，但它提供了一种方法和一种事件，我们可以使用它来实现这一目的。

我们将使用slid.bs.carousel事件来检测轮播完成其幻灯片转换的时间以及.carousel('pause')选项以阻止轮播在项目中循环。

我们将在每个具有不同持续时间的轮播项目上使用此属性data-interval="x"，因此我们的html将如下所示：

<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')
使用项目的持续时间和持续时间后设置超时完成后我们应该停止旋转木马

javascript代码如下所示：

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

正如你所看到的，我们在开始时被迫添加一个起始间隔并且我将其设置为1000毫秒，但每次我暂停旋转木马duration-1000时我都会删除它。我使用下面的行来解决第一项问题，因为该项目未被slid event捕获。

var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

我还注意到，如果用户按下箭头，超时会变得很疯狂，这就是我每次用户按下左右箭头时清除超时的原因。

以下是我的实例http://jsfiddle.net/paulalexandru/52KBT/，希望此回复对您有所帮助。

Answer 2

您需要将主div中的interval设置为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>

Answer 3

我无法让carousel('pause')在引导程序事件处理程序中工作。我不确定为什么 - 可能是因为使用KnockoutJS动态渲染幻灯片，或者是Bootstrap 中的错误（我猜测它是我的代码）。

因此，为了在旋转木马中设置独立于其朋友的单个幻灯片的间隔，我使用了slid.bs.carousel事件在Bootstrap中冒出来并使用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。等等。等等...

Answer 4

如果您仍未找到解决方案，我已修改Bootstrap carousel.js 以添加此功能。

将可选属性（数据间隔）添加到＆＃34; item＆＃34; class element。

<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

Twitter Bootstrap Carousel幻灯片持续时间

4 个答案: