Bootstrap Carousel: supprimer la glissière automatique

120

J'utilise Bootstrap Carousel. Tout ce que je veux, c'est que le curseur ne glisse que lorsque l'utilisateur clique sur une navigation ou une pagination. J'ai essayé de supprimer

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

Cela fonctionne bien mais mon problème est qu'une fois que j'ai déjà cliqué sur une navigation ou une pagination, il glisse maintenant automatiquement. Est-il possible de supprimer la fonction de glissement automatique? Si c'est le cas, comment?

javascript jquery twitter-bootstrap khatzie
la source

Réponses:

227

Vous pouvez le faire de 2 façons, via js ou html (easist)

  1. Via js
$('.carousel').carousel({
  interval: false,
});

Cela arrêtera le glissement automatique car il n'y a pas de millisecondes ajoutées et ne glisse jamais ensuite.

  1. Via Html En ajoutant data-interval="false"et en supprimantdata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

devient:

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

mis à jour sur la base du commentaire de @ webMan

Iliya Reyzis
la source
38
Débarrassez-vous également de la data-ride="carousel"syntaxe ... et correcte pour inline:data-interval="false"
webMan
111

À partir des documents officiels :

intervalle Délai entre le cycle automatique d'un élément. Si faux , le carrousel ne fonctionnera pas automatiquement.

Vous pouvez transmettre cette valeur avec javascript ou en utilisant un data-interval="false"attribut.

Diego Agulló
la source
9
merci pour le data-interval = 'false', l'option facile si vous utilisez un the-bootstrapthème dans Wordpress
toto_tico
32
data-interval="false"c'est la bien meilleure solution, pas besoin de toucher le bootstrap JS!
lxg
2
Cela ne fonctionne pas pour moi <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... and Nothing ... still autosliding
Lachezar Raychev
C'est en effet beaucoup plus simple pour les cas simples, mais gardez à l'esprit que c'est une bien meilleure conception d'utiliser votre coutume scripts.jset de ne garder aucun codage de script dans le html! ;)
cregox
55

Il vous suffit d'ajouter un attribut supplémentaire à votre balise DIV qui est

data-interval="false"

pas besoin de toucher JS!

Nikunj Dhimar
la source
36

Modifier / Ajouter à data-interval = "false" sur carrousel div

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">
Arun
la source
7

S'il vous plaît essayez ce qui suit:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>
Nikit Barochiya
la source
1
C'est le seul qui a fonctionné avec moi au moment de l'exécution en utilisant la console.
Bishoy Hanna
4

data-interval = "faux"

Ajoutez ceci au div correspondant ...


la source
3 
$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

En utilisant le script ci-dessus, vous pourrez déplacer les images automatiquement

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

En utilisant le script ci-dessus, auto-rotationsera bloqué car intervalestfalse

Nitin Anvekar
la source