Comment modifier la vitesse de transition du carrousel Bootstrap (intervalle de temps)

Bootstrap est l’un des frameworks HTML/CSS/JavaScript les plus populaires et légers pour les développeurs.
Il est largement utilisé pour créer des sliders d’images, des bannières d’accueil et même des thèmes WordPress.
Le carrousel Bootstrap est idéal pour présenter images ou contenus de manière fluide et responsive.

Par défaut, le carrousel fait défiler automatiquement avec un intervalle défini, mais vous pouvez
contrôler la vitesse du slider selon vos besoins : plus rapide pour des aperçus d’images,
plus lent pour des présentations narratives. Ci-dessous, découvrez comment ajuster
l’intervalle de temps et affiner la durée de l’animation avec quelques lignes de code.

Inutile de modifier les fichiers principaux de Bootstrap. Il suffit d’ajuster votre HTML et votre CSS.

Réglage de l’intervalle du carrousel Bootstrap

Voici l’extrait par défaut du carrousel :

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
    <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
  </div>
  
  <!-- Left and right controls --> 
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> 
</div>

Ajouter l’attribut `data-interval`

Pour définir la durée d’affichage de chaque slide, ajoutez data-interval au conteneur :

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>

1000 = 1 seconde
3000 = 3 secondes
Remplacez 3000 par la valeur souhaitée.

La manière la plus simple de contrôler la vitesse du carrousel sur un site responsive.

Modifier la durée de l’animation en CSS

L’intervalle contrôle la durée d’affichage d’un slide, mais vous pouvez aussi
personnaliser l’animation. Par défaut, Bootstrap utilise 0,6 seconde.
Pour un fondu ou glissement plus lent, augmentez le temps dans votre CSS.

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

Ici, nous passons à 1,2 seconde. Ajustez selon l’effet voulu.

Pourquoi ajuster la vitesse ?

Expérience utilisateur : slides plus longs pour la narration ou les mises en avant.
E-commerce : slides plus rapides pour parcourir des images produits.
SEO & engagement : des interactions fluides retiennent mieux l’utilisateur.
Thèmes WordPress : de nombreux thèmes utilisent Bootstrap ; mêmes réglages.

Conclusion

Le carrousel Bootstrap est simple, responsive et largement supporté.
En ajustant l’intervalle et la durée d’animation, votre slider se démarque
sur un portfolio, un blog ou une boutique en ligne.