web-dev-qa-db-fra.com

Ajouter le bouton Lecture/Pause pour démarrer le carrousel

J'ai lu presque toutes les discussions concernant le carrousel de bootstrap, mais je n'ai pas trouvé de réponse à ma question… .. J'ai ajouté deux boutons de commande (lecture/pause) au carrousel, mais chaque bouton lance la fonction depuis le par défaut/première diapositive. Je voudrais pouvoir mettre en pause la diapositive actuelle et lire à partir de la diapositive actuelle chaque fois que l'événement click se produit.

Voici mon code:

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

Et les deux contrôles:

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
twitter-bootstrapcarousel
12
Mojgan

Cela devrait fonctionner. Je m'assurerais que vos événements de clic se déclenchent comme prévu, car certains éléments du carrousel de démarrage peuvent apparaître au-dessus de vos éléments et empêcher les clics.

Si vous ajoutez les contrôles suivants dans HTML:

<div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-play"></span>
     </button>
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-pause"></span>
    </button>
</div>

Ensuite, les JavaScript suivants doivent contrôler le démarrage et l’arrêt de n’importe quel cadre:

$('#playButton').click(function () {
    $('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
    $('#homeCarousel').carousel('pause');
});

En rapport avec mon premier point, pour les faire apparaître correctement dans le carrousel, vous pouvez attribuer un style au groupe de boutons avec les éléments CSS suivants:

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

_ { Démo de travail dans jsFiddle } _

Pour que cette fonctionnalité ait le meilleur sens, vous voulez probablement que le carrousel continue à se déplacer, même si vous le survolez (sinon, le comportement du cycliste ne reprendra que lorsque vous déplacerez la souris).

Selon la documentation du carrousel : 

Option - pause
Default - "hover" - Met en pause le cycle du carrousel sur mouseenter et reprend le cycle du carrousel sur la feuille de souris.

Au lieu de cela, assurez-vous de désactiver cette option lorsque vous initialisez le carrousel de la manière suivante:

$('#homeCarousel').carousel({
    interval:2000,
    pause: "false"
});
15
KyleMit

C'était mon approche. Vous pouvez styler les classes .pause et .play comme bon vous semble, mais j'utilise simplement du texte brut à des fins de démonstration:

$('.carousel-control.pause').click(function() {
        var controls = $(this);
        if (controls.hasClass('pause')) {
            controls.text('Resume').removeClass('pause').toggleClass('play');
            $('#myCarousel').carousel('pause');
        } else {
            controls.text('Pause').removeClass('play').toggleClass('pause');
            $('#myCarousel').carousel('cycle');
        }
    });

Voici votre détonateur

<a class="carousel-control pause" href="javascript:void(0);">Pause</a>
0
Evan

Pour ceux qui voudraient que les boutons play/pause s’éteignent . Exemple jsFiddle

Javascript:

 $("button").click(function() {
  if ($(this).attr("id") === "pauseButton") {
    $('#homeCarousel').carousel('pause');
    $(this).attr("id", "playButton");
    $("span", this).toggleClass("glyphicon-play glyphicon-pause");
  } else {
    $('#homeCarousel').carousel('cycle');
    $(this).attr("id", "pauseButton");
    $("span", this).toggleClass("glyphicon-pause glyphicon-play");
  }
});

HTML:

<div id="carouselButtons">
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-pause"></span>
    </button>
  </div>
0
Maria