Carrousel Bootstrap : suppression de la diapositive automatique

Question

J'utilise Bootstrap Carousel. Tout ce que je veux, c'est que le curseur ne glisse que lorsqu'une navigation ou une pagination est cliquée. J'ai essayé de supprimer

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

Cela fonctionne bien, mais le problème est qu'une fois que j'ai cliqué sur une navigation ou une pagination, elle se déplace automatiquement. Est-il possible de supprimer la fonction de glissement automatique ? Si oui, comment ?

Answer 1

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 il n'y aura jamais de glissement suivant.

2. Via Html En ajoutant data-interval="false" et la suppression data-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

Answer 2

De la documents officiels :

intervalle Le délai d'attente entre les cycles automatiques d'un élément. Si faux Le carrousel n'effectuera pas de cycle automatique.

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

Answer 3

Il vous suffit d'ajouter un attribut supplémentaire à votre balise DIV, à savoir

data-interval="false"

pas besoin de toucher à JS !

Answer 4

Modification/Ajout de data-interval="false" sur le carrousel div

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

Answer 5

Dans Bootstrap v5, utilisez : data-bs-interval="false"

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