Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Bootstrap][carroussel] n'affiche qu'un slide

    23 septembre 2021 à 11:14:45

    Bonjour,

    Je me permet de solliciter votre aide car j'ai un carroussel avec plusieurs slide et le carroussel boutstrap ne m'affiche qu'un slide.

    Voici mon code:

    <div id="" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="/plateforme-immo/upload/23-09-2021-02-13-52-boutique.png" alt="Premier slide">
                                    </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/23-09-2021-02-13-52-contact.png" alt="">
                                        </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/23-09-2021-02-13-52-page-accueil.png" alt="">
                                        </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                        </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                        </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                        </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                        </div>
                                                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="/plateforme-immo/upload/" 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> 



    Merci d'avance pour votre aide et de m'aider à comprendre pourquoi il n'y a qu'un seul slide.

    .

    -
    Edité par MiaoLee 23 septembre 2021 à 15:57:45

    • Partager sur Facebook
    • Partager sur Twitter
      29 septembre 2021 à 13:50:45

      Bonjour, personne pour m'aider ?
      • Partager sur Facebook
      • Partager sur Twitter
        29 septembre 2021 à 14:23:54

        Bonjour,

        Pour pouvoir t'aider il faudrait nous donner plus de détails que ça...

        Quelle est ta version de Bootstrap ? Quel est ton code complet ? Les liens vers les CSS et JS de Bootstrap sont bons ? As-tu des screenshots de ta structure de dossiers et de fichiers ? Les autres fonctionnalités de Bootstrap utilisées ailleurs su ton projet fonctionnent ? As-tu un message d'erreur dans la console de ton navigateur ? Ou un code d'erreur ? As-tu pris soin de vider le cache de ton navigateur ? etc etc.

        Tu dois nous aider à t'aider, nous ne sommes pas devins... ;)

        • Partager sur Facebook
        • Partager sur Twitter
          29 septembre 2021 à 15:25:55

          lol oui il manque beaucoup d'info,

          Je n'ai pas de message d'erreur dans la console pour js et css bootstrap 5 j'utilise:

            <head>
              <title>Balance ton bien</title>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          
              <!-- Bootstrap CSS v5.0.2 -->
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">    
              <link rel="stylesheet" href="style.css">
          
              <!-- Bootstrap JavaScript Libraries -->
              <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer ></script>
              <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer ></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" defer ></script>
              <script src="script.js" defer></script>
            </head>

          Je n'ai pas eu besoin d'utiliser bs5 js.min  je ne suis dons pas sur que ça fonctionne mais j'ai une erreur :TypeError: customCSSObj is undefined, mais je ne pense pas que ca ait un rapport avec bootstrap.

          voici le code source de la page:

          <!doctype html>
          <html lang="fr">
            <head>
              <title>Balance ton bien</title>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          
              <!-- Bootstrap CSS v5.0.2 -->
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">    
              <link rel="stylesheet" href="style.css">
          
              <!-- Bootstrap JavaScript Libraries -->
              <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer ></script>
              <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer ></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" defer ></script>
              <script src="script.js" defer></script>
            </head>
            <body>
          
                <header>
                      <div class="container-fluid">
                          <div class="row min-height-nav">   
                              <div class="col-md-1"></div>
                              <div class="col-6 col-md-5 flex flex-center-v">
                                  <div class=" flex  ">
                                      <h5 id="slogan">Déposez votre annonce sur Balance ton bien gratuitement !</h5>
                                  </div>
                              </div>                  
                              <div class="col-6 col-md-5 flex flex-center-v flex-end">    
                                  <!-- barre de navigation -->   
                                  <nav class="navbar navbar-main navbar-expand-lg navbar-light bg-light size-nav"> 
                                          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                              <span class="navbar-toggler-icon"></span>
                                          </button>
                                          <div class="collapse navbar-collapse" id="">
                                              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                                  <li class="nav-item">
                                                                                                  <a class="nav-link"><img class="ico-allign" src="bs-icons/bootstrap-icons-1.5.0/person-fill.svg" alt="Bootstrap" width="12" height="12">Bienvenue Obierti </a>
                                                      </li>
                                                      <li class="nav-item">    
                                                          <a class="nav-link" href="espace.php"><img class="ico-allign" src="bs-icons/bootstrap-icons-1.5.0/person-fill.svg" alt="Bootstrap" width="12" height="12">mon espace</a>
                                                      </li>
                                                      <li class="nav-item">    
                                                          <a class="nav-link" href="foncphp/deconnect.php"><img class="ico-allign" src="bs-icons/bootstrap-icons-1.5.0/person-fill.svg" alt="Bootstrap" width="12" height="12">Déconnexion</a>
                                                      </li>
                                                                                                  <li class="nav-item dropdown">
                                                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Langue</a>
                                                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                          <li><a class="dropdown-item small" href="#">Français (french)</a></li>
                                                          <!-- <li><a class="dropdown-item small" href="#">English (US)</a></li> -->
                                                      </ul>
                                                  </li>
                                              </ul>
                                          </div>
                                  </nav>
                                  <!-- fin de bare de navigation -->
                                 
                              </div>            
                              <div class="col-md-1"></div>
                          </div>
                      </div>
                          <!-- fin de barre de menu -->
                          <hr class="sticky-hr">
                          <!-- header titre   -->
                      <div class="container-fluid">
                          <div class="row h-row-titre min-wi">
                              <div class="col-md-1"></div>
                              <div class="col-12 col-md-5 flex flex-center-v" id="col-titre">
                                  <h1><a href="index.php" id="titre">BALANCE TON BIEN </a></h1>
                              </div>
                              <div class="col-12 col-md-5 flex flex-center-v flex-end" >
                                  <div>
                                  <div class="">
                                      <div class="col-sm-12">
                                          <form action="deposerannonce.php">
                                              <button class="btn btn-success btn-max" id="publier">PUBLIER UNE ANNONCE GRATUITE</button>    
                                          </form>
                                      </div>
                                      <div class="col-md-12 mt-1">
                                          <form action="annuaireagences.php">
                                              <button class="btn btn-success btn-max" id="agence">TROUVER UNE AGENCE OU UN ARTISAN</button>
                                          </form>  
                                      </div>                        
                                  </div>
                                  </div>
                              </div>
                              <div class="col-md-1"></div>
                              </div>
                          </div>
                    </div>
                    
                </header>
          
                
              <div class="container">
              <div class="p-5 bg-light">
                  <div class="container">
                      <h1 class="display-5">Consulter / Modifier</h1>
                      <hr class="my-2">
                      <form action="single-annonce.php" method="post">
                          <div class="row">
                              <div class="col">
                                                  </div>
                          </div>
                          <!-- numéro annonce et catégories -->
                          <div class="row my-2">
                              <div class="col-md-4">
                                  <label for="idb">Numéro annonce</label>
                                  <input type="text" class="form-control text-center" name="idb" value="49" disabled >
                                  <input type="hidden" class="form-control text-center" name="idb" value="49" >
                              </div>
                             <!-- catégories -->
                              <div class="col-md-8">
                                  <label for="cat">Catégorie</label>
                                  <select name="cat" id="" class="form-select">
                                      <option value="3">Vente Appartement</option>                            
                                                                          <option value="1">Location Appartement</option>
                                                                          <option value="2">Location Maison Villa</option>
                                                                          <option value="3">Vente Appartement</option>
                                                                          <option value="4">Vente Maison Villa</option>
                                                                          <option value="5">Bureaux et commerces</option>
                                                                          <option value="6">Chambres et colocations</option>
                                                                          <option value="7">Terrains</option>
                                                                          <option value="8">Places de parking et garage</option>
                                                                          <option value="9">Propositions diverses</option>
                                                                          <option value="10">Locations et Gîtes</option>
                                                                          <option value="11">Chambres d'hôtes</option>
                                                                          <option value="12">Camping</option>
                                                                          <option value="13">Hébergement Atypique</option>
                                                                          <option value="14">Vacances en Europe</option>
                                                              </select>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col col-md-8">
                                  <label for="titre">Titre annonce</label>
                                  <input type="text" class="form-control text-center" name="titre" value="Maison T4 98m²" require>
                              </div>
                              <div class="col col-md-4">  
                                  <label for="prix">Prix en €</label>
                                  <input type="text" class="form-control text-center" value="180000" name="prix" require>
                              </div>
                          </div>
                          <div class="row my-2">
                              <div class="col">
                                  <div class="mb-3">
                                      <label for="desc" class="form-label">Description</label>
                                      <textarea class="form-control" name="desc" id="" rows="3">Belle maison de 98m² a saisir</textarea>
                                  </div>
                              </div>
                          </div>
                          <div class="row my-2">
                              <div class="col-md-12">
                                  <label for="adresse">Adresse</label>
                                  <input name="adresse" class="form-control" type="text" disabled value="">
                              </div>
                          </div>
                          <div class="row my-2">
                              <div class="col-md-8">
                                  <label for="">Ville</label>
                                  <input type="text" disabled class="form-control" value="Charron">
                              </div>
                              <div class="col-md-4">
                                  <label for="">Code postal</label>
                                  <input type="text" disabled class="form-control" value="17230">
          
                              </div>
                          </div>
                          <!-- Carroussel slide -->
                          <div class="row my-2 mt-5">
                              <div class="col">
                                  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                      <div class="carousel-inner">
                                      <!-- rajouter active -->
                                          <div class="carousel-item active"> 
                                              <img class="d-block w-100" src="/plateforme-immo/upload/29-09-2021-01-43-28-index4.jpeg" alt="Premier slide">
                                          </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/29-09-2021-01-43-28-index3.jpeg" alt="">
                                              </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/29-09-2021-01-43-28-image56s.jpeg" alt="">
                                              </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/29-09-2021-01-43-28-indexmlkj.jpeg" alt="">
                                              </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                              </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                              </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/" alt="">
                                              </div>
                                                                              <div class="carousel-item ">
                                                  <img class="d-block w-100" src="/plateforme-immo/upload/" 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> 
                              </div>
                          </div>
                          <!-- fin slide -->
                          <!-- Mosaique -->
                          <div class="row">
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/29-09-2021-01-43-28-index4.jpeg" class="img-fluid" alt="Photo N1">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <button class="btn btn-danger btn-max">Supprimer</button>
                                      </div>                         -->
                                  </div>
                              </div>
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/29-09-2021-01-43-28-index3.jpeg" class="img-fluid" alt="Photo N2">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <button class="btn btn-danger btn-max">Supprimer</button>
                                      </div>                         -->
                                  </div>
                              </div>
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/29-09-2021-01-43-28-image56s.jpeg" class="img-fluid"  alt="Photo N3">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <button class="btn btn-danger btn-max">Supprimer</button>
                                      </div>                         -->
                                  </div>
                              </div>
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/29-09-2021-01-43-28-indexmlkj.jpeg" class="img-fluid"  alt="Photo N4">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <button class="btn btn-danger btn-max">Supprimer</button>
                                      </div>                         -->
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/" class="img-fluid"  alt="Photo N5">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <button class="btn btn-danger btn-max">Supprimer</button>
                                      </div>                         -->
                                  </div>
                              </div>
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/" class="img-fluid"  alt="Photo N6">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <button class="btn btn-danger btn-max">Supprimer</button>
                                      </div>                         -->
                                  </div>
                              </div>
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img id="supp-img-7" src="/plateforme-immo/upload/" class="img-fluid " alt="Photo N7">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                      <form action="unset.php" method="post">
                                          <input type="hidden" value="">
                                          <button name="unset-7" type="submit" class="btn btn-danger btn-max">Supprimer</button>
                                      </form>               
                                  </div>    -->                      
                                  </div>
                              </div>
                              <div class="col single">
                                  <div class="row">
                                      <div class="vignette">
                                          <img src="/plateforme-immo/upload/" class="img-fluid" alt="Photo N8">
                                      </div>
                                  </div>
                                  <div class="row b-center">
                                      <!-- <div class="col col-md-6">
                                          <button class="btn btn-success">Modifier</button>
                                      </div> -->
                                      <!-- <div class="col">
                                          <form action="unset.php" method="post">
                                              <input type="hidden" value="">
                                              <button name="unset-8" type="submit" class="btn btn-danger btn-max">Supprimer</button>
                                          </form>
                                      </div> -->
                                  </div>
                              </div>
                              <!-- fin mosaique -->
                          </div>
                          <div class="row my-5">
                              <div class="col mx-0">
                                  <button type="submit" name="valider-mo-sp" class="btn btn-success btn-max btn-h">Modifier l'annonce</button>
                              </div>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
          
          
          
          <footer class="footer-height">
              <div class="container c-gris"> 
                  <div class="foot-marg">
                  <div class="row">
                      <div class="col-md-4 mb-5">
                      <form action="devenir-partenaire.php" method="post">
                          <button type="submit" class="btn btn-success btn-max mb-2">Pour devenir partenaire contactez-nous</button>
                      </form>
                      <form action="">
                          <button type="submit" class="btn btn-success btn-max">Trouvez une agence immobilière ou un artisan en partenariat avec balance ton bien</button>
                      </form>
                      </div>
                      <div class="col-md-4 mb-5">
                          <form class="form" action="#" method="post">
                              <input type="text" class="form-control mb-2" require name="nom" placeholder="Votre nom">
                              <input type="mail" class="form-control mb-2" require name="mail" placeholder="Votre mail">
                              <input type="text" class="form-control mb-2" require name="sujet" placeholder="sujet">
                              <textarea class="form-control mb-2" name="" placeholder="Message" id="" rows="3"></textarea>
                              <button type="button" class="btn btn-success btn-max">Envoyer</button> 
                          </form>
                      </div>
                      <div class="col-md-4 mb-5 flex">
                          <!-- menu footer -->
                          <ul class="flex-center-h footer-menu">
                              <div class="flex-center color-w"><li><a class="white" href="connexion.php">Connexion</a></li></div>
                              <div class="flex-center color-w"><li><a class="white" href="creationcompte.php">Créer un compte gratuit</a></li></div>
                              <div class="flex-center color-w"><li><a class="white" href="contact.php">Nous contacter</a></li></div>
                              <div class="row">
                                  <div class="col">
                                      <hr>
                                  </div>
                              </div>
                                  <div class="flex-center color-w"><li><a class="white" href="mentions-legales.php">Politique de confidentialité</a></li></div>
                                  <div class="flex-center color-w"><li><a class="white" href="">Conditions générales d'utilisation</a></li></div>
                              <div class="row">
                                  <div class="col">
                                      <hr>
                                  </div>
                              </div>
                                  <div class="flex-center color-w">
                                      <div class="flex-center-h flex">
                                          
                                          <li><a class="white" href="#"><img class="marg-ico" src="img/ico/thumb_up_alt_white_24dp.svg" alt="facebook">Suivez-nous sur Facefook</a></li>
                                      </div>
                                  </div>
                              </div>
                          </ul>
                          <!-- fin du menu -->
                      </div>
                  </div>
          
              </div>
              </div>
          
              
                  <div class="row c-gris-w mt-3">
                  <hr>
                      <div class="col text-center">
                          <h6>balancetonbien.com &copy; 2021 tous droits réservés</h6>
                      </div>
                  </div>
          </footer>
                
          </body>
          </html>

          Merci pour votre aide.

          • Partager sur Facebook
          • Partager sur Twitter
            29 septembre 2021 à 17:02:44

            Je pense avoir trouvé la réponse, c'est ton code qui est faux.

            Si je regarde la doc de Bootstrap 5 sur le carousel (https://getbootstrap.com/docs/5.0/components/carousel/#with-controls) : tu utilises les attributs "data-ride" au lieu de "data-bs-ride", "data-slide au lieu de "data-bs-slide", etc.

            En gros, tu utilises la synthèse de Bootstrap 4 alors que tu travailles avec Bootstrap 5... Dans le doute il faut toujours se référer à la doc...;)

            Et, au passage, pour éviter d'autres problèmes tu devrais déplacer les scripts en bas de page juste avant la fermeture du body.

            • Partager sur Facebook
            • Partager sur Twitter

            [Bootstrap][carroussel] n'affiche qu'un slide

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown