[Bootstrap][carroussel] n'affiche qu'un slide par MiaoLee - page 1

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.

MiaoLee

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

29 septembre 2021 à 13:50:45

Bonjour, personne pour m'aider ?

Mewen_bzh

29 septembre 2021 à 14:23:54

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...

Je ne réponds pas aux messages privés.

29 septembre 2021 à 15:25:55

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.

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

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

Supprimer

Modérer

Signaler le message aux modérateurs