Faire une caroussel avec bootstrap
RésoluJessekamba Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/photo1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/photo3.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/photo2.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
Tout ce que j'ai comme résultat c'est la première image et les contrôleurs du slide mais les images ne changent pas même après avoir cliqué sur le contrôleur.
Je signale aussi que j'ai déjà inclus les fichiers bootstrap.css et bootstrap.js
Je ne sais si j'ai loupé un truc dans la documentation et que je devrais mettre dans mon code.
1 réponse
Problème central : un carousel Bootstrap ne fait pas défiler les images et reste bloqué sur la première, malgré l'inclusion des fichiers bootstrap.css et bootstrap.js et l'utilisation des contrôles Prev/Next. Des solutions essentielles indiquent de charger jQuery avant Bootstrap et de vérifier l'ordre des scripts, ainsi que de s'assurer que les attributs data-target et href des éléments correspondent exactement à l'ID du carrousel. D'autres expliquent des erreurs dans data-target ou href qui ne correspondent pas, et suggèrent d'éviter des mélanges de versions Bootstrap avec jQuery ou l'inclusion hors ordre des scripts. Une nuance utile est de vérifier la console du navigateur pour d'éventuelles erreurs JavaScript et, si nécessaire, de fournir une capture écran afin d'identifier rapidement une erreur de chargement.