Carousel avec images stockées dans une base de données

Eléphant du PHP | 67 Messages

04 août 2021, 08:31

Bonjour,
Je souhaite créer un carousel dynamique avec les images stockées dans une base de données, le problème est l'item active reste figée sur la première image. comment puis-je y remédier ?

Code : Tout sélectionner

<? $reponse = $bdd->query( 'SELECT * FROM MaTable WHERE debut <NOW() AND fin >NOW() ORDER BY id ASC' ); ?> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <? while ( $slides = $reponse->fetch() ) { ?> <div class="carousel-item active"> <img src="images/slides/<? echo $slides['image'] ?>" class="d-block w-100" alt=""> </div> <div class="carousel-item"> <img src="images/slides/<? echo $slides['image'] ?>" class="d-block w-100" alt=""> </div> <?php } $reponse->closeCursor(); ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>

Mammouth du PHP | 1935 Messages

04 août 2021, 10:03

quel est le code html de l'exemple ?
quel est le code html généré par ce code php ?

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9039 Messages

04 août 2021, 10:14

Fais le en HTML/Javascript uniquement (sans PHP), et ensuite compare ton code avec celui généré en PHP pour voir ce qui cloche.

Tu peux aussi regarder dans la console javascript de ton navigateur (Ctrl+Maj+k sous Firefox et probablement Chrome) pour voir si il n'y aurait pas des erreurs JS
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphant du PHP | 67 Messages

04 août 2021, 10:17

sans PHP oui mais je veux récupérer les images de a base

ynx
Eléphant du PHP | 323 Messages

04 août 2021, 10:46

Le fait de réaliser le carrousel sans code PHP permet dans un premier temps de s'assurer que les codes HTML et Javascript sont corrects (bien vérifier dans la console du navigateur les éventuelles erreurs comme indiqué par @rthur).

Lorsque le carrousel sera fonctionnel en HTML/JS, tu pourras alors implémenter le PHP pour ajouter les images de la bdd.

Eléphant du PHP | 67 Messages

04 août 2021, 10:50

Sans PHP il est fonctionnel, j'ai récupéré le modèle Bootstrap et testé

Mammouth du PHP | 1935 Messages

04 août 2021, 10:52

il faut donc maintenant faire en sorte que le php génère le même code html que le code qui fonctionne avec vos images.

Eléphant du PHP | 67 Messages

04 août 2021, 11:00

J'ai trouvé ça fonctionne de cette façon, mais peut-être il y a mieux ?

Code : Tout sélectionner

$reponse = $bdd->query( 'SELECT * FROM MaTable WHERE debut <NOW() AND fin >NOW() ORDER BY id ASC LIMIT 10 OFFSET 1' ); $reponse1 = $bdd->query( 'SELECT * FROM MaTable WHERE debut <NOW() AND fin >NOW() ORDER BY id ASC LIMIT 0,1' ); ?> <div id="carouselExampleControls" class="p-0 carousel slide container" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <? $slides1 = $reponse1->fetch() ?> <img src="images/slides/<? echo $slides1['img1200'] ?>" class="d-block w-100" alt=""> </div> <div class="carousel-item"> <? while ( $slides = $reponse->fetch() ) { ?> <img src="images/slides/<? echo $slides['img1200'] ?>" class="d-block w-100" alt=""> </div> <?php } $reponse->closeCursor(); ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>

Eléphant du PHP | 67 Messages

12 août 2021, 11:55

Bonjour,
Je reviens solliciter de l'aide pour mon carousel, je n'arrive pas à rendre fonctionnel les boutons précédents et suivants et les indicateurs,
Quelqu'un a une idée ?

Code : Tout sélectionner

<div id="carouselExampleDark" class="carousel carousel-dark slide container" data-bs-ride="carousel"> <div class="carousel-indicators"> <? $stmt1 = $bdd->query('SELECT * FROM MaTable WHERE debut <NOW() AND fin >NOW()'); $counter1 = 1; while($row1 = $stmt1->fetch()){ ?> <button type="button" <?php if ($counter1 === 1) { echo 'class="active"'; } ?> data-bs-target="#carouselExampleDark" data-bs-slide-to="<? echo $row1['id'] ?>" aria-label="Slide"></button> <?php $counter1++; } $stmt1->closeCursor(); ?> </div> <div class="carousel-inner"> <? $stmt2 = $bdd->query('SELECT * FROM MaTable WHERE debut <NOW() AND fin >NOW()'); $counter2 = 1; while($row2 = $stmt2->fetch()){ ?> <div class="carousel-item <?php if ($counter2 === 1) { echo ' active'; } ?>" data-bs-interval="1000"> <img src="images/slides/<? echo $row2['img1200'] ?>" class="d-block w-100" alt="..."> </div> <?php $counter2++; } $stmt2->closeCursor(); ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9039 Messages

12 août 2021, 14:18

Il faut que tu avances dans ton debugage :
Qu’est-ce qui ne marche pas ?
A quel moment ce que tu as fait à stopper le bon fonctionnement de ce qui marchait ?
Quels sont les messages d'erreurs PHP ou javascript (cf la console de ton navigateur) ?
Et comme toujours dans ce cas, repars du HTML/CSS/JS pur d'abord, et quand ça marche ajoute progressivement le code PHP pour rendre ça dynamique
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphant du PHP | 67 Messages

12 août 2021, 14:23

En fait quand je fais le slide sans les indicateurs ça fonctionne, je reprends le code html de Bootstrap 5 avec indicateurs et là pas moyen