[RESOLU] Carousel Bootstrap 4 dynamique

par **barale61** » 10 janv. 2019, 16:15

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>

par **@rthur** » 09 janv. 2019, 22:50

Bonjour,

Il faut que tu regardes le HTML généré et que tu le compares avec le HTML des exemples de bootstrap pour voir les différences

par **barale61** » 09 janv. 2019, 16:37

Bonjour,

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

<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 remecie de votre aide.

[RESOLU] Carousel Bootstrap 4 dynamique

Répondre

Étendre la vue Revue du sujet : [RESOLU] Carousel Bootstrap 4 dynamique

Re: Carousel Bootstrap 4 dynamique

Re: Carousel Bootstrap 4 dynamique

Carousel Bootstrap 4 dynamique