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>

Answer 3

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.

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

Answer 4

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

Answer 5

In case if you are looking for Angular solution, please below link

Add interval for each mdb-carousel item in Angular

Here is the extract from the link: In HTML, we need to pass the carousel component back to the Typescript using activeSlideChange method available for the slide event. Also need to add ids for each carousel item for reference

-- HTML

<div>
  <mdb-carousel  #carousal  [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'"
  (activeSlideChange)="activeSlideChange(carousal)" >
    <mdb-carousel-item id='home'>
      <!-- THIS NEEDS TO BE DISPLAYED FOR 5 SECS -->
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
    </mdb-carousel-item>

    <mdb-carousel-item id='time'>
      <!-- THIS NEEDS TO BE DISPLAYED FOR 15 SECS -->
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
    </mdb-carousel-item>
  </mdb-carousel>
</div>

In typescript, we can define the activeSlideChange method like this

 activeSlideChange(cc: CarouselComponent){
   let slideItem = cc.slides[cc.activeSlide];
   let id = slideItem.el.nativeElement.id;
   console.log(id);
    if ( id === 'home') {
        cc.interval = 1000 * 5 ; // 5 secs
    } else if ( id === 'time') { 
      cc.interval = 1000 * 15; // 15 secs
    }else  {
      cc.interval = 5000;
    }
  }