Custom Carousel Intervals?

Question

In Bootstrap 3, with jQuery is there a way to sort by the index of my carousel and add custom intervals of each slide so that I can have one slide 10000ms and another 500ms

Answer 1

You can create a custom attribute that denotes how long the slide should be visible for, pull that out for the active item on the slide.bs.carousel or slid.bs.carousel events (whichever you prefer/works best for you), then set it as a timeout to go to the next slide.

$('#carousel-example-generic').on('slide.bs.carousel', function() {
  var interval = $('div.item.active').attr('duration');
  setTimeout(function() {
    $('.carousel').carousel('next');
  }, interval);
});

  
  

    

    

    

    

  

  
  

    

      
      

        First
      
    
    

      
      

        Second
      
    
    

      
      

        Third
      
    
    

      
      

        Fourth
      
    
  

  
  
    
    Previous
  
  
    
    Next