Twitter Bootstrap轮播幻灯片的滑动持续时间

Question

Twitter Bootstrap轮播幻灯片的滑动持续时间

twitter-bootstraptwitter-bootstrap-3carousel

4

在Twitter Bootstrap Carousel中，我要如何让特定的幻灯片播放时间与其他幻灯片不同？使用“interval”参数可以更改整个滑动器的持续时间，但不知道如何为特定的幻灯片设置自定义时间。

- Rafa Mérida

我知道已经过去一年多了，但我非常高兴我找到了一个简单的解决方案，即使今天这个问题仍然存在。我希望我的答案对你有所帮助。 - paulalexandru

还可以查看Bootstrap自定义轮播间隔。 - Carol Skelly

4个回答

0

您需要在主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>

- Ali Umair

请举例说明不同幻灯片之间的不同时间间隔。 - Gleb Kemarsky

不确定如何在不同幻灯片上使用不同的时间间隔...但它解决了我想要做的事情，即更改所有幻灯片上的时间间隔。因此，感谢您为此提供简单的帖子。 - Sprose

-1

在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。以此类推，循环往复...

- Andy Brudtkuhl

-2

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

在“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

- Kevin Garcia

1

快要完成了，但你不想修改Bootstrap核心（或者至少不应该想要这样做）。 - Andy Brudtkuhl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- paulalexandru · 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/，希望这个回答对您有所帮助。