web-dev-qa-db-fra.com

Bootstrap JavaScript Le carrousel n'arrête pas le vélo

Twitter Bootstrap Version: 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 constater, j'ai activé le mode en pause et désactivé le cycle. Mais lorsque je clique sur les commandes gauche ou droite du carrousel, celui-ci se met à cycler selon l'intervalle par défaut (5 secondes par cycle) sur la mousille.

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 .

javascripttwitter-bootstrap
33
its_me

Vous voudrez peut-être essayer de supprimer l'attribut "pause". Ce n'est pas nécessaire si vous ne parcourez pas automatiquement les images. Mon hypothèse (et je vais regarder le code de démarrage pour vérifier) ​​est que, lorsque l'événement "mouseleave" se déclenche, le cycle reprend - même s'il a été désactivé. Quand il reprend, il utilise la vitesse par défaut.

Voici une solution: 

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

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>
35
Yann Thomas-Gérard

Je viens de trouver une solution à ce problème. Rien de ce qui précède n'a fonctionné pour moi, mais cela m'a amené à regarder le code bootstrap. Je crois que la raison de ce bogue est dans le fichier bootstrap-carousel.js dans l'objet par défaut:

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

Une fois le carrousel glissé, il revient à ces valeurs par défaut. Si vous souhaitez que le carrousel ne glisse pas et ne soit contrôlé que par l'utilisateur, vous pouvez modifier l'objet par défaut pour qu'il dispose d'un intervalle de faux. J'espère que cela t'aides. 

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

Je ne suis pas sûr de savoir pourquoi mais la solution principale ne m'a pas fonctionné 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 carouselpause .

9
Clint C.
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">

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

8
ses

Outre ce que @dgabriel suggère, assurez-vous que l'appel JavaScript qui initialise le carrousel Bootstrap est APRÈS les références <script> à jQuery, bootstrap-transition.js et bootstrap-carousel.js, à peu près comme ceci:

<script type="text/javascript" src="http://Twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://Twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://Twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.gallery-carousel').each(function(){
        $(this).carousel({
            interval: false
        });
    });
});
</script>

Cela garantit que le carrousel fonctionne comme prévu (erreurs telles queUncaught ReferenceError: $ is not defined (anonymous function)par exemple.

3
its_me

J'ai tout essayé, mais rien n'a fonctionné. J'ai résolu le problème en changeant les fichiers bootstrap.min.js & bootstrap.js. Vous devez rechercher "carousel.defaults" avec Ctrl + F dans ces fichiers et remplacer ce qu'il contient par:

interval:false
1
aerospace

Je pense que la réponse de @ dgabriel devrait fonctionner, car:

la méthode pause () de bootstrap carousel ne traite pas son argument comme vous le pensez. pause (true) ne signifie pas "oui, mettez-le en pause", pas plus que pause (false) ne signifie "non, ne le mettez pas en pause".

on peut le voir dans le code source, 

Carousel.prototype.pause = function (e) {
  e || (this.paused = true)
  ...
  this.interval = clearInterval(this.interval)

  return this
}

lien github ici

comme on peut le voir, si e est vrai, this.paused = true ne sera pas exécuté. Ainsi, lorsque l'événement "mouseleave" se déclenche, la méthode cycle () continue à afficher "paused == false" et setInterval est à nouveau exécuté.

// mouseleave event fires using cycle() with no arguments
.on('mouseleave', $.proxy(this.cycle, this))

// so when cycle() is called, this.paused == false.
Carousel.prototype.cycle =  function (e) {
  e || (this.paused = false)

  this.interval && clearInterval(this.interval)

  // set interval == false to prevent setInterval
  this.options.interval
    && !this.paused
    && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

  return this
}

pour mettre en pause, utilisez .pause() et interval=false afin d’empêcher le recyclage de l’événement "mouseleave". bootstrap lui-même l'utilise de cette façon, on peut voir ici

1
francischan

En fait, changer les valeurs par défaut dans bootstrap-carousel.js de la manière suivante m'a aidé.

Carousel.DEFAULTS = {
    interval: false,
    pause: 'hover',
    wrap: false
  }
1
user3877963

J'ai un problème à faire aussi Stop bootstrap Carousel de la lecture automatique. J'ai vérifié le fichier bootstrap.js et j'ai trouvé les codes liés au carrousel Puis je supprime l'autre js . Dans le nouveau fichier js, je crée une copie de tous les codes, puis je change la variable de carrousel en Carousel_n (car il est possible de le changer. à tout ce que vous voulez) . Dans la dernière ligne de codes, la chose la plus importante à faire est: 

 {  $('[data-ride="carousel"]').each(function () }

Je change carousel en carousel_n.

pour html j'ai seulement changé: 

<div id="Carousel" class="carousel slide" data-ride="carousel">

à 

<div id="Carousel" class="carousel slide" data-ride="carousel_n">

et bien sûr cela a vraiment fonctionné.

0
N A