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

Question

提问by Rafa Mérida

In the Twitter Bootstrap Carousel, how can I make a particular slide to have a different duration than others?

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

I can change the whole slider duration with the "interval" parameter, but don't know how to set a custom duration for a particular slide.

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

Answer 1

回答by paulalexandru

Bootstrap 3.1 carousel don't allow diferent duration for each slide, but it offers one methodand one eventthat we can use in order to ahieve this.

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

We will use the slid.bs.carouselevent to detect when the carousel has completed its slide transition and the .carousel('pause')option to stop the carousel from cycling through items.

我们将使用该slid.bs.carousel事件来检测轮播何时完成其滑动过渡以及.carousel('pause')阻止轮播在项目之间循环的选项。

We will use this attribute data-interval="x"on each carousel item with different time duration, so our html will look like this for example:

我们将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>

Now, all we have to do is to:

现在，我们要做的就是：

detect when a new item is displayed using the slid.bs.carouselevent
check his duration
pause the carousel using .carousel('pause')
set a timeout with the duration of the item and after the duration completed we should unpause the carousel

使用slid.bs.carousel事件检测何时显示新项目
检查他的持续时间
使用暂停轮播 .carousel('pause')
使用项目的持续时间设置超时，在持续时间完成后，我们应该取消暂停轮播

The javascript code will look like this:

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

As you can see, we are forced at the begining to add a starting interval and i've set it to 1000ms but i remove it each time i pause the carousel duration-1000. I've used the lines below to resolve the first item problem because that item was not caught by the slid event.

如您所见，我们在开始时被迫添加一个开始间隔，我将其设置为 1000 毫秒，但每次暂停轮播时我都会将其删除duration-1000。我使用下面的行来解决第一项问题，因为该项目没有被slid event.

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

I also noticed that if the user presses the arrows, the timeout is going crazy, that's why i clear the timeout each time the user press on the left and right arrow.

我还注意到，如果用户按下箭头，超时会变得疯狂，这就是为什么每次用户按下左右箭头时我都会清除超时。

Here is my live example http://jsfiddle.net/paulalexandru/52KBT/, hope this response was helpful for you.

这是我的现场示例http://jsfiddle.net/paulalexandru/52KBT/，希望此回复对您有所帮助。

Answer 2

回答by Ali Umair

You need to set interval in main div as data-interval tag. So it is working fine and you can give different time to different slides.

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

Answer 3

回答by Andy Brudtkuhl

I could not get carousel('pause')to work at all inside the bootstrap event handlers. I'm not sure why - potentially it was due to dynamically rendering the slides with KnockoutJS or perhaps a bug in Bootstrap (I'm guessing it's my code).

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

So in order to set an individual slide's interval independent of it's friends in the carousel I used the slid.bs.carouselevent bubbled up in Bootstrap along with using setTimeoutto set the interval based on the item's data-intervalattribute and manually calling the carousel('next')method.

因此，为了独立于轮播中的朋友设置单个幻灯片的间隔，我使用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>

In this example #slide1will be the initial slide in your carousel and show for 5 seconds. After 5 seconds it will slide to #slide2.

在此示例中，#slide1将是轮播中的初始幻灯片并显示 5 秒钟。5 秒后，它将滑动到#slide2。

#slide2will pause for 10 seconds before sliding to #slide3. And so on. And so on...

#slide2在滑动到之前将暂停 10 秒#slide3。等等。等等...

Answer 4

回答by Kevin Garcia

If you still haven't found a solution, I have modified the Bootstrap carousel.jsto add this functionality.

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

Add optional attribute (data-interval) to "item" class element.
<div class="active item" data-interval="6000">

Modify carousel.js

Add flag to determine first cycle

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

Modify CYCLE function

 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
 }

将可选属性（data-interval）添加到“item”类元素。
<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
 }

Sample: JS Fiddle

示例：JS 小提琴

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

提问by Rafa Mérida

回答by paulalexandru

回答by Ali Umair

回答by Andy Brudtkuhl

回答by Kevin Garcia

相关推荐

最近更新

标签

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

提问by Rafa Mérida

回答by paulalexandru

回答by Ali Umair

回答by Andy Brudtkuhl

回答by Kevin Garcia

相关推荐

twitter-bootstrap 为什么此 CSS 不适用于 Android 上的 Chrome，但适用于其他任何地方？

twitter-bootstrap Twitter Bootstrap：获取引导复选框按钮的状态

twitter-bootstrap Bootstrap 下拉菜单三角形的奥秘是什么？

twitter-bootstrap 在引导程序中选择项目时如何更改下拉列表的主显示

相关推荐

最近更新

标签