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

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>

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 ?

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

04 août 2021, 10:17

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

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.

04 août 2021, 10:50

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

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.

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>

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>

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

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

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

Qui est en ligne