How to fetch data and display to Carousel - Bootstrap 4 & PHP - php

Question

Here is my Bootstrap ui that the data is fetched from the database. As you can see, the carousel is going down and cannot click next it just goes down. from the page.
1
please see the image above
data that I'm fetching are texts and not image
and here is my code
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<?php
$dataid;
$data = mysqli_query($con,"SELECT * FROM feedback");
$count = mysqli_num_rows($data);
if ($count != 0) {
echo '
<div class="row ">';
while($row = mysqli_fetch_array($data)) {
echo '
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<p class="testimonial">'. $row['comment'] .'</p>
<p class="overview"><b>Anonymous</b></p>
<div class="star-rating">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-heart" ></i></li>
<li class="list-inline-item"><i class="fas fa-thumbtack" ></i></li>
<li class="list-inline-item"><i class="fas fa-archive"></i></li>
<li class="list-inline-item"><i class="fa fa-trash" ></i></li>
<li class="list-inline-item"><i class="fa fa-star-o"></i></li>
</ul>
</div>
</div>
</div>
';
}
}
?>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>

Answer 1

The carousal structure is like
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
so you need to repeat the carousel-item
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php while($row = mysqli_fetch_array($data)) { ?>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<?php } ?>
</div>
</div>

Answer 2

If you need to display the text in the Carousel that comes from database then just give some padding and background-color to the Image
<div class="carousel-item active">
<img src="<?php echo imageSrcFromDb; ?>" width="1100" height="500">
<div class="carousel-caption">
<h3><?php echo ; //Your Heading text ?></h3>
<p><?php echo ; //Some description ?></p>
</div>
</div>

Answer 3

<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<?php
while($row = mysqli_fetch_array($data)) {
echo '
<div class="item carousel-item">
<p class="testimonial">'. $row['comment'] .'</p>
<p class="overview"><b>Anonymous</b></p>
<div class="star-rating">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-heart" ></i></li>
<li class="list-inline-item"><i class="fas fa-thumbtack" ></i></li>
<li class="list-inline-item"><i class="fas fa-archive"></i></li>
<li class="list-inline-item"><i class="fa fa-trash" ></i></li>
<li class="list-inline-item"><i class="fa fa-star-o"></i></li>
</ul>
</div>
</div>
';
}
?>
</div>
the while loop should be inside the class carousel-inner .