How to make carousel work properly with php - php

Question

enter image description hereHere is the output I have tried this code but the carousel is not working properly...The first image is shown properly but the second one is shown below the first one and not in slides....Here is my code..
<div class="banner">
<?php
mysqli_set_charset($conn, 'utf8');
$query=mysqli_query($conn,"select * from post_tbl where status='Approved' Order by pid DESC");
while($row=mysqli_fetch_array($query))
{
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="carousel-caption">
<h3><?php echo $row['title']; ?>
</h3>
<div class="read">
Read More
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php } ?>
</div>

Answer 1

You will need 2 loops. One to know how many rows you are going to draw. This will be used to build your ol DOM.
The second to loop your actual div content where your select contains the necessary information.
<div class="banner">
<?php
mysqli_set_charset($conn, 'utf8');
$query = mysqli_query($conn, "select * from post_tbl where status='Approved' Order by pid DESC");
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<?php for ($numElements = 0; $numElements < mysqli_num_rows($query); $numElements++) : ?>
<li data-target="#carouselExampleIndicators"
data-slide-to="<?php echo $numElements ?>" <?php echo($numElements == 0 ? 'class="active"' : '') ?> ></li>
<?php endfor; ?>
<div class="carousel-inner" role="listbox">
<?php $rows = mysqli_fetch_array($query); ?>
<?php foreach ($rows as $row) : ?>
<div class="carousel-item <?php echo($row == reset($rows) ? 'active' : '') ?>">
<div class="carousel-caption">
<h3><?php echo $row['title']; ?>
</h3>
<div class="read">
Read More
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This should set your DOM correctly.
If you are already familiar with OOP concepts this gets way more organised and protected and would highly advice to follow that route instead.
Also there are plenty of threads around warning about sql injection so, if you are thinking on having a variable to dynamically adjust your query, please look into those first
As an introduction I can leave you with this thread