Carousel not displaying cards right after getting data from mysql

Andy S.

i need some help with one problem, i tried to make a card carousel getting data from my mysql database, all went well but the cards are displayed under each other not like it should be displayed in a carousel/slider, any ideas how could i fix this to show them in one line? here is my code and a picture:

embedded image

    <?php
      include_once 'includes/dbh.inc.php';
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

    <meta charset="utf-8">
    <title>carusel</title>
  </head>
  <body>





    <section class="container p-t-3">
        <div class="row">
            <div class="col-lg-12">
                <h1>Bootstrap 4 Card Slider</h1>
            </div>
        </div>
    </section>
    <section class="carousel slide" data-ride="carousel" id="postsCarousel">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-md-right lead">
                <a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
                <a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
            </div>
        </div>
    </div>
    <div class="container p-t-0 m-t-2 carousel-inner">
             <div class="row row-equal carousel-item active m-t-0">
                 <div class="col-md-4">
                <?php
                $sql = "SELECT * FROM users;";
                $results = mysqli_query($conn, $sql);
                $resultCheck = mysqli_num_rows($results);
                if ($resultCheck > 0){
                    while ($row = mysqli_fetch_assoc($results)) { ?>
                    <div class="card" style="width: 18rem;">
                        <div class="card-img-top">
                        <img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
                        </div>
                        <div class="card-body">
                        <h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
                        <p><?php echo $row['card_text_profil']; ?></p>
                        <a href="<?php echo $row['profil_link']; ?>" class="btn btn-primary">Profil site</a>
                        </div>
                    </div>
                    <?php } ?>
                <?php } ?>
            </div>
        </div>
    </div>
  </section>

  </body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="js/scripts.js"></script>
</html>
AmmoPT

You're closing 2 </div> inside the while loop, but they are being opened before the while loop, you need to add them to the beginning of the while loop.

Added a condition to check if it's the first element in the carousel, and if it is, add the active class as required per the documentation.

Initial active element required The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

The code I suggest as an answer makes it a lot more readable, this makes it a lot easier to prevent problems of this nature. Indentation goes a long way to help you see clearly where a block/loop starts and where it ends.

Working minimal fiddle here.

Replace:

<div class="container p-t-0 m-t-2 carousel-inner">
         <div class="row row-equal carousel-item active m-t-0">
             <div class="col-md-4">
    <?php

      $sql = "SELECT * FROM users;";
      $results = mysqli_query($conn, $sql);
      $resultCheck = mysqli_num_rows($results);

      if ($resultCheck > 0){
        while ($row = mysqli_fetch_assoc($results)) {


          //echo '<tr><th scope="row">'.$row['user_id'].'</th><td>'.$row['user_last']."</td><td>".$row['user_uid']."</td></tr>";
          /*echo '<div class="card" style="width: 18rem;">';
          echo '<img class="card-img-top" src="'.$row['avatar'].'" alt="Card image cap">';
          echo '<div class="card-body">';
          echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
          echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
          echo '<a href="'.$row['profil_link'].'" class="btn btn-primary">Profil site</a>';
          echo '</div>';
          echo '</div>';*/
          echo '<div class="card" style="width: 18rem;">';
          echo '<div class="card-img-top">';
          echo '<img class="img-fluid" src="'.$row['avatar'].'" alt="Carousel">';
          echo'</div>';
          echo '<div class="card-body">';
          echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
          echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
          echo '<a href="'.$row['profil_link'].'" class="btn btn-primary">Profil site</a>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
          echo '</div>';




        }
      }
    ?>





     </div>

With:

<div class="container p-t-0 m-t-2 carousel-inner">
  <?php
  $sql = "SELECT * FROM users;";
  $i = 1;
  $results = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($results);
  if ($resultCheck > 0){
    while ($row = mysqli_fetch_assoc($results)) { ?>
      <?php if($i % 2 != 0): //add new slider every odd row ?>
          <div class="row row-equal carousel-item <?php echo ($i == 1) ? "active" : ""; ?> m-t-0">
      <?php endif; ?>
        <div class="col-md-4">
          <div class="card" style="width: 18rem;">
            <div class="card-img-top">
              <img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
            </div>
            <div class="card-body">
              <h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
              <p><?php echo $row['card_text_profil']; ?></p>
              <a href="<?php echo $row['profil_link']; ?>" class="btn btn-primary">Profil site</a>
            </div>
          </div>
        </div>
          <?php if($i % 2 != 0): //add new slider every odd row ?>
            </div>
          <?php endif; ?>
    <?php $i++; } ?>
  <?php } ?>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Displaying cards from Firestore data in flutter

MS Teams carousel with thumbnail cards not displaying

Php code not displaying the data right from database

Displaying data from mysql database

Displaying Not Found Data From MySQL

Adaptive cards question on displaying data

Getting data from backend and displaying in Pug

Getting data from Firebase not displaying with React JS?

Getting json from an URL and displaying specific data

Displaying data from mysql from datepicker

Bootstrap Carousel cards to be positioned from bottom to top

Displaying data from a mysql server on a datagridview object. is not displaying anything

PHP select one data from mysql NOT DISPLAYING

displaying data from MySQL in PHP according to a condition

Displaying data from a mysql table using php

PHP Echo not displaying data from MySql

Data from MySql displaying multiple times

Oracle APEX Cards not displaying all data

Getting Project name when displaying data from Firebase database

Progress Dialog getting dismissed before displaying fetched data from firestore

Getting largest value from JSON and displaying related data (API/Javascript)

Carousel is not displaying

Read more and less not working after displaying the data from ajax

Displaying data from an JSON array of users after selecting the ID of a User

React: Data from API not displaying on page after first click

How to setState after getting data from Firestore

getting names displaying from firebase

Facing problem while displaying data from mysql database

Displaying data in table format from mysql database with php loop