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

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Carousel avec images stockées dans une base de données

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

par ChrisCMoi62 » 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

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

par @rthur » 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

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

par ChrisCMoi62 » 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>

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

par ChrisCMoi62 » 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>

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

par or 1 » 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.

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

par ChrisCMoi62 » 04 août 2021, 10:50

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

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

par ynx » 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.

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

par ChrisCMoi62 » 04 août 2021, 10:17

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

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

par @rthur » 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

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

par or 1 » 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 ?

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

par ChrisCMoi62 » 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>