Bootstrap OwlCarousel fetch data php - php

Question

I have this slider that I want to show data from database it's fetch data but the Carousel style don't work.
I want to show the image and the title in Carousel so that ever time the admin change the images from database it's change in the web.
index.php
<!-- -->
<?php include('./includes/header.php');
require("conn.php");
$sql_query = "SELECT * FROM slider_tbl";
$result = $conn->query($sql_query);
?>
<!-- -->
<div class="container">
<br>
<div id="myslider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<?php
if($result->num_rows>0) {
while($row=$result->fetch_assoc()) {
?>
<div class="carousel-item active">
<img src="<?php echo $row['slider_imgpath']; ?>"
alt="<?php echo $row['img_title']; ?>"
style='width:100%'>
</div>
</div>
<?php
}
}
?>
<a class="carousel-control-prev" href="#myslider" 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="#myslider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- -->
<?php include('./includes/footer.php'); ?>
<!-- -->
conn.php
<?php
$user_name = "root";
$host_name = "localhost";
$password = "";
$db_name = "onlines";
$conn = new mysqli($host_name,$user_name,$password,$db_name);
if($conn->connect_error) {
die("Connnection Error Failed : ".$conn->connect_error);
}
else{
}
?>
the Carousel code work well if i dont use php but when i use it everthing stop in OwlCarousel .