twitter-bootstrap - Twitter Bootstrap 轮播幻灯片持续时间

Question

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

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

score 4 · Accepted Answer

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/，希望此回复对您有所帮助。

score 0 · Accepted Answer

您需要将主 div 中的间隔设置为数据间隔标记。所以它工作正常，你可以给不同的幻灯片不同的时间。

<!--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>

score -1 · Accepted Answer

我根本无法carousel('pause')在引导事件处理程序中工作。我不知道为什么 - 可能是由于使用 KnockoutJS 动态渲染幻灯片，或者可能是 Bootstrap 中的错误（我猜这是我的代码）。

因此，为了设置独立于轮播中的朋友的单个幻灯片的间隔，我使用了slid.bs.carouselBootstrap 中冒泡的事件以及 usingsetTimeout根据项目的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。等等。等等...

score -2 · Accepted Answer

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

将可选属性（data-interval）添加到“item”类元素。

<div class="active item" data-interval="6000">

修改carousel.js

添加标志以确定第一个周期

var Carousel = 函数（元素，选项）{
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = 选项
this.paused =
this.sliding =
this.interval =
this.$active =
this.$items = null
//[TODO Kevin] 添加 - BEGIN
this.isFirstCycle=true
//[TODO Kevin] 添加 - BEGIN

this.options.pause == '悬停' && 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 小提琴

twitter-bootstrap - Twitter Bootstrap 轮播幻灯片持续时间

4 回答 4

Related

Reference