Select first 10 rows and display into a slideshow - php

Question

I'm creating a website and I want to display my data into a slideshow from database. The slideshow is made using bootstrap.
My code looks like this:
<?php
include 'header.php';
require 'includes/dbh-inc.php';
function make_query($conn)
{
$query = " SELECT * FROM notes ORDER BY id ASC";
$result = mysqli_query($conn,$query);
return $result;
}
function make_slide_indicators($conn)
{
$output = '';
$count = 0;
$result = make_query($conn);
while($row = mysqli_fetch_array($result))
{
if($count == 0)
{
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"></li>
';
} else {
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"></li>';
}
$count = $count + 1 ;
}
return $output;
}
function make_slides($conn)
{
$output = '';
$count = 0;
$result = make_query($conn);
while($row = mysqli_fetch_array($result))
{
if($count == 0)
{
$output .= '<div class="item active">';
} else {
$output .= '<div class="item">';
}
$output .= '<img src="images/notes/'.$row["image"]
.'" alt="'.$row["denomination"].'" style=" width: 100%;height: 300px;" />
<div class="carousel-caption">
<h3>' .$row['price'].'</h3>
</div>';
$count = $count +1;
}
return $output;
}
?>
<main>
<div class="container">
<h2 align="center">Pedigree Notes</h2>
<br />
<div id="dynamic_slide_show" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php echo make_slide_indicators($conn); ?>
</ol>
<div class="carousel-inner">
<?php echo make_slides($conn); ?>
</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>
</main>
<?php
include 'footer.php';
?>
It is working somehow, but it displays both pictures from database in first slide, half slide first pictures the other half the second picture.
Can you please tell me what I'm supposed to do?

Answer 1

In your function make_slides, change the class item to carousel-item
if($count == 0)
{
$output .= '<div class="carousel-item active">';
} else {
$output .= '<div class="carousel-item">';
}