Faire une caroussel avec bootstrap [Résolu]

Messages postés
53
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
5 août 2019
-
Bonjour à tous. Je travaille sous bootstrap, je veux faire une caroussel mais je n'y arrive pas bien que je me sert de la documentation, voici mon code


<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.
Afficher la suite 

1 réponse

Messages postés
26519
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 octobre 2019
1833
0
Merci
Bonjour,

Bootstrap 3 ou 4 ?
bootstrap.css et bootstrap.js ... Tu les as inclus comment et où ?
As tu également inclus jquery ? quelle version ?

Pour finir.. as tu des erreurs dans la console de ton navigateur ?

jordane45
Messages postés
26519
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 octobre 2019
1833 -
Essayes avec ça :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
 <div class="container">    
    <!-- CAROUSEL -->
    <div id="demo" class="carousel slide" data-ride="carousel">
      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/photo1.jpg" alt="photo1">
        </div>
        <div class="carousel-item">
          <img src="images/photo2.jpg" alt="photo2">
        </div>
        <div class="carousel-item">
          <img src="images/photo3.jpg" alt="photo3">
        </div>
      </div>
      <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
    <!-- FIN DU CAROUSEL -->
  </div>
  <!-- On essaye de placer au maximulm les CSS et les JS à la fin -->
  <script src="js/bootstrap.js"></script> 
  <script src="js/jquery3.js"></script> 
  <link rel="stylesheet" href="css/bootstrap.css"> 
  
</body>
</html>
Jessekamba
Messages postés
53
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
5 août 2019
-
le code tel que tu me l'a donné ne marche pas mais j'ai fait une petite modification (juste mettre jquery3.js au dessus de bootstrap.js) qui fonctionne maintenant. mais jusque la je ne vois trop ou se trouvait mon erreur, si tu peux m’éclaircir pour que je ne puisse plus retomber dans la même erreur prochainement. c-a-d qu'est ce que tu as modifié dans mon code précédent a mis a part ajouter jquery et charger les fichiers css et js au bas du code????

MERCI infiniment
jordane45
Messages postés
26519
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 octobre 2019
1833 > Jessekamba
Messages postés
53
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
5 août 2019
-
Oui pour le jquery j'avais recopié 5on code précédent.
Pour ce qui est des modifs... Il faut comparer avec ton code.
J'ai juste repris un exemple du net
Jessekamba
Messages postés
53
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
5 août 2019
-
Merci Jordan. J'ai comparé mon code, j'ai constaté que j'avais quelques petites erreurs sur le data-target qui n'était pas conforme au href de la photo à slider et à la div principale.
Jessekamba
Messages postés
53
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
5 août 2019
-
Le sujet est résolu, je peux le classer.
Commenter la réponse de jordane45