jquery - Bootstrap - set different interval on each carousel item -

this question has answer here:

• different slide duration each item on bootstrap 3.1 carousel 3 answers

hi i'm having carousel on bootstrap , i'd set each item different interval, first item have duration of 10 sec, 2nd 5 sec 3rd 3sec etc etc ..

therefore decided use data attribute

  <!-- carousel -->         <div id="mycarousel" class="carousel slide" data-ride="carousel">              <!-- indicators -->             <ol class="carousel-indicators">                 <li data-target="#mycarousel" data-slide-to="0"  class="active"></li>                 <li data-target="#mycarousel" data-slide-to="1" ></li>                 <li data-target="#mycarousel" data-slide-to="2" ></li>             </ol>              <!-- wrapper slides -->             <div class="carousel-inner">                 <div class="item active" data-interval="8000">                     <img src="carousel/icon_1.jpg" />                     <div class="carousel-caption">                          <h2 class="carousel-title">welcome site</h2>                          <p class="carousel-text">lorem ipsum dolor sit amet</p>                         <p class="carousel-text">lorem ipsum dolor sit amet</p>                    </div>             </div><!-- /.item -->               <div class="item" data-interval="4000">                 <img src="carousel/icon_2.jpg" />                 <div class="carousel-caption">lorem ipsum dolor sit amet</div>             </div><!-- /.item -->               <div class="item" data-interval="4000">                 <img src="carousel/icon_3.jpg" />                 <div class="carousel-caption">lorem ipsum dolor sit amet</div>             </div><!-- /.item -->           </div><!-- /.carousel-inner -->  </div> <!-- carousel -->  <script type="text/javascript"> $(document).ready(function () {             // more scripts here ...  // main part             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);             });         }); </script> 

in case might need change time interval in future. problem slides apply same interval (about 2 or 1 sec). how can fix this?

the approach have followed correct need capture sliding event of twitter-bootstrap carousel make work below:

demo

var t; var start = $('#mycarousel').find('.active').attr('data-interval'); t = settimeout(function(){          $('#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);    }); 

for more detailed version visit original answer