Different slide duration for each item on bootstrap 3.1 carousel

Question

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

Answer 1

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

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

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:

<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.carousel event
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

The javascript code will look like this:

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.

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.

Answer 2

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)

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

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