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
source

227

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

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.

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

7

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

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

— Nikit Barochiya
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 ...

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
source