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:
<?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>
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.
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.
Comments