I'm using carousel to display data from database and I tried to set first card active but it won't work and cards are static. Cards works fine without php. I was trying to use boolean variable and set active class with some conditions but it didn't work.
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<?php
require_once('connect/dbConnection.php');
$query = "SELECT * FROM table_cards";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result)) {
$image = 'uploads/'.$row['images'];
$isFirst = True;
if ($isFirst == True) {
$isFirst == False;
?>
<div class="carousel-item active" data-interval="2000">
<?php
} else {
?>
<div class="carousel-item" data-interval="2000">
<?php } ?>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="<?php echo $image; ?>" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><?php echo $row['name']; ?></h5>
<p class="card-text text-left"><i class="fas fa-ruler-combined"></i> <strong>Size</strong>: <?php echo $row['size']; ?><br> <i class="fas fa-money-bill-wave"></i> <strong>Price</strong>: <?php echo $row['price']; ?><br><i class="fas fa-home"></i> <strong>House type</strong>: <?php echo $row['house_type']; ?><br><br><i class="fas fa-bed"></i> <?php echo $row['bed']; ?><i class="fas fa-toilet"></i> <?php echo $row['toilet']; ?></p>
<a href="gallery.html#first-post" class="stretched-link"></a>
</div>
<div class="card-footer">
<small class="text-muted">Lorem</small>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"><i class="fas fa-angle-left fa-2x carousel-icon mr-1"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"><i class="fas fa-angle-right fa-2x carousel-icon ml-1"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
My Answer:
You can achieve this by adding a conditional statement in your PHP code to determine if the current card being generated is the first one, and if so, add the `active` class to it. Here's an example of how you can do this:
php
$active = true; // Set the first card as active
foreach ($items as $item) {
if ($active) {
echo '';
$active = false; // Set active to false after the first card
} else {
echo '';
}
echo '';
// Display card content here
echo '';
echo '';
}
?>
In this code snippet, we set the `$active` variable to `true` before the loop starts. Inside the loop, we check if `$active` is true, and if it is, we add the `active` class to the first card. After that, we set `$active` to `false` so that the subsequent cards won't have the `active` class.
This way, the first card will be set as active in the carousel. Make sure to replace `$items` with your actual array of items from the database.
Rate this post
3 of 5 based on 3146 votesComments