Carousel Bootstrap 4 dynamique

Par barpoi78, il y a 7 ans

PHP

Bonjour,

Je souhaite faire un carousel dynamique avec php et bootstarp 4 mais jes items s'affichents les uns en dessous des autres:

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php /*Extraction des données*/ $reponse = $bdd->query('SELECT * FROM realisations ORDER BY id ASC'); $counter = 1; while($row = $reponse->fetch()){ ?> <div class="item<?php if($counter <= 1){echo " active"; } ?>"> <a href="<?php echo $row['lien'] ?>" target="_blank"> <img alt="<?php echo $row['titre'] ?>" src="./IMG/<?php echo $row['img'] ?>"/> </a> <div class="finlay-carousel-caption"> <h3><?php echo $row['titre'] ?></h3> <p><?php echo $row['texte'] ?></p> </div> </div> <?php $counter++; } ?> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="ti-angle-left indicators-left" 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="ti-angle-right indicators-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>

Je vous remercie de votre aide.

7 réponses

Lartak, il y a 7 ans

Bonjour.
C'est normal, tu donnes comme valeur carouselExampleIndicators à l'attribut id, alors que dans les liens pour prev et next tu définis #carouselExampleControls comme valeur à leurs attributs href.
Du coup le composant crousel ne fonctionne pas au niveau JavaScript, pour que ça fonctionne sans ajouter du code JavaScript pour faire fonctionner le composant, il te faut remplacer carouselExampleIndicators par carouselExampleControls.
Ton problème est uniquement côté HTML et non PHP.

barpoi78, il y a 7 ans

Merci j'ai fait une erreur lorsque j'ai réessayé pour copier le code. Les liens envoient bien vers les autres item donc le carousel fonctionne mais tous les items s'affichent en même temps les uns en dessous des autres alors que je fais:

<div class="item<?php if($counter <= 1){echo " active"; } ?>">

Il devrait n'y en avoir qu'un actif.

Lartak, il y a 7 ans

Tu veux donc dire que la div en réalité porte bien la valeur carouselExampleControls pour son attribut id et que toutes les div ayant comme class item ont toutes en plus la class active ?

barpoi78, il y a 7 ans

Oui alors j'ai enlevé

<?php if($counter <= 1){echo " active"; } ?>

et essayé en jquery

$('.carousel-inner>div:first-child').addClass('active');`

mais ça fait pareil.

Lartak, il y a 7 ans

Il y a quand même une chose que je ne comprends pas, d'où sors tu la classe finlay-carousel-caption ?
Cette classe n'existe pas dans la document de Bootstrap concernant le composant Carousel.
Côté PHP à ta place j'aurais plutôt fait :

$counter = 1; // ... <?php if ($counter === 1) { echo ' active'; } ?>

Il te faut éviter d'utiliser les doubles quotes avec du PHP à l'intérieur d'un attribut HTML.
Sinon côté JavaScript :

$('.carousel-inner > .item:first').addClass('active');

Si ça ne fonctionne toujours pas correctement, montres ton dernier code et bien recopié de préférence.

barpoi78, il y a 7 ans

Merci, je m'excuse mais entre temps j'ai modifié mon carousel pour que les images s'affichent sur une colonne à gauche et le texte à droite de cette façon:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php /*Extraction des données*/ $reponse = $bdd->query('SELECT * FROM realisations ORDER BY id ASC'); $counter = 1; while($row = $reponse->fetch()){ ?> <div class="row item <?php if ($counter === 1) { echo ' active'; } ?>"> <div class="col-lg-6"> <a href="<?php echo $row['lien'] ?>" target="_blank"> <img class="w-100" alt="<?php echo $row['titre'] ?>" src="./IMG/<?php echo $row['img'] ?>"/> </a> </div> <div class="col-lg-6 p-5"> <h3><?php echo $row['titre'] ?></h3> <p><?php echo $row['texte'] ?></p> </div> </div> <?php $counter++; } $reponse->closeCursor(); ?> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="ti-angle-left indicators-left" 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="ti-angle-right indicators-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

mais les lignes donc les items s'affichent tous en même temps les uns après les autres.

barpoi78, il y a 7 ans

Voilà mon carousel fonctionnel. J'ai modifié le carousel bootstrap pour faire en sorte que l'image s'affiche sur la gauche sur 6 colonnes (donc version pc) et le titre, texte et un bouton s'affiche sur la colonne de droite sur 6 colonnes. J'ai utilisé pour les icones suivant et retour Themify Icons:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php /*Extraction des données*/ $reponse = $bdd->query('SELECT * FROM realisations ORDER BY id ASC'); $counter = 1; while($row = $reponse->fetch()){ ?> <div class="row carousel-item <?php if ($counter === 1) { echo ' active'; } ?>"> <div class="col-lg-6 p-0 no-gutters" style="float: left !important;"> <img class="w-100" alt="<?php echo $row['titre'] ?>" src="./IMG/<?php echo $row['img'] ?>"/> </div> <div class="col-lg-6 p-5" style="float:right !important"> <h2><?php echo $row['titre'] ?></h2> <p><?php echo $row['texte'] ?></p> <button class="button" onClick="window.open('<?php echo $row['lien'] ?>','_blank');">Visitez le site</button> </div> </div> <?php $counter++; } $reponse->closeCursor(); ?> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span style="color: #FEC503;font-size: 2rem;font-weight: bold;" class="ti-angle-double-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span style="color: #FEC503;font-size: 2rem;font-weight: bold;" class="ti-angle-double-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>