twitter-bootstrap bootstrap 3.1 carousel 上每个项目的幻灯片持续时间不同

Different slide duration for each item on bootstrap 3.1 carousel

提问by Umer bin Siddique

I am trying to have different duration for each slide as my some slides have large content and some small please give me a solution with fiddle

我试图为每张幻灯片设置不同的持续时间，因为我的一些幻灯片内容很大，有些内容很小，请给我一个带小提琴的解决方案

I tried this but it only works on slide animation timing:

我试过这个，但它只适用于幻灯片动画计时：

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

回答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:

现在，我们要做的就是：

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

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

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

回答by Gláucio Leonardo Sant'ana

First of all, thank you @paulalexandru. Your code at first didn't work for me, however making some changes, I was able to achieve the expected result. The main issue was related to the element not finding the duration-interval, so I used javascript instead of jquery (I'm still a beginner on it). So the following code worked for me (I'm keeping the old code as comment)

首先，谢谢@paulalexandru。您的代码起初对我不起作用，但是进行了一些更改，我能够达到预期的结果。主要问题与未找到持续时间间隔的元素有关，因此我使用了 javascript 而不是 jquery（我仍然是初学者）。所以以下代码对我有用（我保留旧代码作为注释）

var t;
//var start = $('#myCarousel').find('.active').attr('data-interval');
var start = document.getElementsByClassName("item active")[0].getAttribute("data-interval");


t = setTimeout(function () {
    $('#myCarousel').carousel('next')
}, start);

$('#myCarousel').on('slid.bs.carousel', function () {

    clearTimeout(t);
    //var duration = $('#myCarousel').find('.active').attr('data-interval');
    var duration = document.getElementsByClassName("item active")[0].getAttribute("data-interval");

    $('#myCarousel').carousel('pause');
    t = setTimeout("$('#myCarousel').carousel('next');", duration);
    console.log(duration);
})

$('.carousel-control.right').on('click', function () {
    clearTimeout(t);
});

$('.carousel-control.left').on('click', function () {
    clearTimeout(t);
});

The HTML

HTML

<div class="carousel-inner" role="listbox">
    <div class="item active" data-interval="3000">
        <img class="first-slide carousel-image-background">
            <div class="container">
                <div class="carousel-caption">
                    <h2 class="carousel-h2">My title</h2>
                    <p class="carousel-p">My description text.</p>
                </div>
            </div>
    </div>
</div>

回答by goldsun

For some reason, the pause method did seem to work for me. So, I used the following code and it worked for me. This works even if you have multiple carousels on the same page. This approach however requires the data-interval attribute mandatory against each carousel item.

出于某种原因，暂停方法似乎对我有用。所以，我使用了以下代码，它对我有用。即使您在同一页面上有多个轮播，这也有效。然而，这种方法要求对每个轮播项目强制使用 data-interval 属性。

var t;
var start = $('#myCarousel').find('.active').attr('data-interval');

t = setTimeout(function () {
    $('#myCarousel').carousel('next')
}, start);

$('#myCarousel').on('slid.bs.carousel', function () {

    clearTimeout(t);
    var duration = $('#myCarousel').find('.active').attr('data-interval');

    //$('#myCarousel').carousel('pause');
    t = setTimeout("$('#myCarousel').carousel('next');", duration);
})

$('.carousel-control.right').on('click', function () {
    clearTimeout(t);
});

$('.carousel-control.left').on('click', function () {
    clearTimeout(t);
});

回答by Wixe

$('.carousel .item').hasClass('active', function() {
    var SlideInterval = $(this).attr('data-interval');
    $('.carousel').carousel({ interval: SlideInterval });
});