34 votes

Le carrousel JavaScript de Bootstrap n'arrête pas de tourner

Version de Twitter Bootstrap : 2.0.3

Exemple de code HTML :

<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            pause: true,
            interval: false
        });
    });
});
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</body>
</html>

CSS : Fourni avec bootstrap.css

Problème : Comme vous pouvez le voir, j'ai activé interrompu et désactivé vélo . Mais lorsque je clique sur les commandes gauche ou droite du carrousel, le carrousel commence à effectuer un cycle à l'intervalle par défaut (5 secondes par cycle) à la fin de la souris.

Comment désactiver de force le cyclisme ? Je veux que les images soient cyclées manuellement par l'utilisateur.

Vous pouvez tester le problème en direct sur mon site de test ici .

42voto

dgabriel Points 1244

Vous pourriez essayer de supprimer l'attribut "pause". Il n'est pas nécessaire si vous ne faites pas défiler automatiquement les images. Mon hypothèse (et je vais regarder le code bootstrap pour vérifier) est que lorsque l'événement "mouseleave" se déclenche, le défilement reprend -- même s'il était désactivé au départ. Lorsqu'il reprend, il utilise la vitesse par défaut.

Voici une solution :

$(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            interval: false
        });
    });
});​

39voto

Pour désactiver le cycle, une solution efficace consiste à ajouter data-interval="false" au conteneur du carrousel :

<div id="myCarousel" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
        <div class="active item">toto</div>
        <div class="item">tata</div>
        <div class="item">tutu</div>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>                                                                        
</div>

29voto

diemondtank Points 286

Je viens de trouver une solution à ce problème. Aucune des solutions ci-dessus n'a fonctionné pour moi, mais cela m'a incité à examiner le code de démarrage. Je pense que la raison de ce bug se trouve dans le fichier bootstrap-carousel.js dans l'objet defaults :

  $.fn.carousel.defaults = {
    interval: 5000
  , pause: 'hover'
  }

Une fois que le carrousel a glissé, il finit par revenir à ces valeurs par défaut. Si vous voulez que le carrousel ne glisse pas et soit uniquement contrôlé par l'utilisateur, vous pouvez modifier l'objet defaults pour qu'il ait un intervalle de false. J'espère que cela vous aidera.

  $.fn.carousel.defaults = {
    interval: false
  , pause: 'hover'
  }

10voto

ses Points 2924
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">

http://getbootstrap.com/javascript/#carousel

9voto

Clint C. Points 404

Je ne sais pas pourquoi, mais la solution principale n'a pas fonctionné pour moi non plus. Bizarre.

Pour résoudre mon problème, j'ai fait le code suivant.

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

$(document).on('mouseleave', '.carousel', function() {

    $(this).carousel('pause');
});

Voir la documentation de carrouselpause .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X