Twitter Bootstrap Carrousel de la durée de la diapositive

Bootstrap 3.1 carrousel ne permettent pas de diferent de la durée de chaque diapositive, mais il offre une méthode et un événement que nous pouvons utiliser afin de ahieve.

Nous allons utiliser le slid.bs.carousel événement à détecter lorsque le mouvement est achevé sa transition de diapo et de la .carousel('pause') option pour arrêter le manège à vélo à travers les éléments.

Nous allons utiliser cet attribut data-interval="x" sur chaque carrousel élément avec différents temps de la durée, de sorte que notre html ressemblera à ceci par exemple:

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

Maintenant, tout ce que nous avons à faire est de:

1. détecter lorsqu'un nouvel élément est affiché à l'aide de la slid.bs.carousel
   événement
2. vérifier sa durée
3. pause le carrousel à l'aide de .carousel('pause')
4. définir un délai d'expiration de la durée de l'élément et après la durée
   terminé nous devrions reprendre le carrousel

Le javascript, le code ressemblera à ceci:

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

Comme vous pouvez le voir, nous sommes forcés au début pour ajouter un intervalle de départ et je l'ai fixé à 1000ms mais je l'enlever à chaque fois que je fais une pause le carrousel duration-1000. J'ai utilisé les lignes ci-dessous pour résoudre le premier problème d'article, car cet élément n'a pas été pris par le slid event.

var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

J'ai aussi remarqué que si l'utilisateur appuie sur les flèches, le délai d'attente est fou, c'est pourquoi j'ai effacer le délai d'attente chaque fois que l'utilisateur appuyez sur la flèche gauche et flèche droite.

Voici mon exemple http://jsfiddle.net/paulalexandru/52KBT/, espérons que cette réponse a été utile pour vous.

OriginalL'auteur paulalexandru

Je ne pouvais pas obtenir carousel('pause') à travailler à l'intérieur de l'amorçage des gestionnaires d'événements. Je ne sais pas pourquoi, peut - être que c'était dû à dynamiquement rendu de la glisse avec KnockoutJS ou peut-être un bug dans le Bootstrap (je suppose que c'est mon code).

Donc dans le but de définir une diapositive de l'intervalle indépendant de ses amis dans le carrousel, j'ai utilisé le slid.bs.carousel événement bouillonnait dans le Bootstrap avec l'aide de setTimeout pour définir l'intervalle basé sur l'élément data-interval attribut et manuellement l'appel de la carousel('next') méthode.

JS

//slide event
$('.carousel').on('slid.bs.carousel', function () {
    var carouselData = $(this).data('bs.carousel');
    var currentIndex = carouselData.getActiveIndex();

    window.setTimeout(function() {
        $('.carousel').carousel('next');
    }, $(carouselData.$items[currentIndex]).data('interval'));
});

//init carousel
$('.carousel').carousel({
    interval: false
});

//set initial timeout for active slide data-interval
window.setTimeout(function () {
    $('.carousel').carousel('next');
}, $('.carousel .active').data('interval'));

HTML

<div class="carousel">
  <div class="carousel-inner">
    <div id="slide1" class="item active" data-interval="5000">{{content}}</div>
    <div id="slide2" class="item" data-interval="10000">{{content}}</div>
    <div id="slide3" class="item" data-interval="10000">{{content}}</div>
  </div>
</div>

Dans cet exemple #slide1 sera la première diapositive de votre carrousel et de montrer pendant 5 secondes. Après 5 secondes, il va glisser vers #slide2.

#slide2 fera une pause de 10 secondes avant de le glisser à #slide3. Et ainsi de suite. Et ainsi de suite...

OriginalL'auteur Andy Brudtkuhl