Joomla Database values fetch in custom module - php

Question

I have created a module in Joomla which will fetch the values from Joomla database table and show in a bootstrap HTML carousal. fetching part is working well but whenever I put the PHP code into Html code where I want those fields to display the carousel is not working. any help will be appreciated. below is my full page code (tmpl/dafault.php)
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/afterglowplayer#1.x"></script>
<?php
defined('_JEXEC') or die;
?>
<?php
$db = JFactory::getDBO();
try {
$query = $db->getQuery(true);
$query->select("*")
->from("tkps5_spotlightamsw_spotlight");
$db->setQuery($query);
$row = $db->loadObjectList();
}
catch (exception $e) { echo $e; }
?>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-md-6">
<h2 class="block-title1">xyz text</h2>
<p class=" "><a class="button subbutton btn btn-border1" href="#">More info</a></p>
</div>
<div class="col-md-6">
<h2 class="block-title1">Spotlight</h2>
<!-- Wrapper for slides -->
<script>
$(document).ready(function() {
//Enable swiping...
$(".carousel-inner").swipe( {
//Generic swipe handler for all directions
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$(this).parent().carousel('prev');
},
swipeRight: function() {
$(this).parent().carousel('next');
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
</script>
<?php foreach ($row as $row): ?>
<?php
$fetured_spotlight = $row->featured_spotlight;
$name = $row->name;
$modified_date = $row->modified;
if($fetured_spotlight == 1 )
{
echo "<div id='myCarousel' class='carousel slide' data-ride='carousel' data-touch='true'> ";
echo " <div class='carousel-inner'>";
echo substr($modified_date,0 , 10);
echo "<div class='item '>";
echo "<img src='".$row->thumbnailimage."' alt='".$name."'>";
echo "<div class='carousel-caption1'>";
echo "<p><strong>".$name."</strong></p>";
echo "</div>";
echo "</div>";
//echo $row->name;
echo " <a class='left carousel-control' href='#myCarousel' data-slide='prev'>";
echo " <span class='glyphicon glyphicon-chevron-left'></span>";
echo " <span class='sr-only'>Previous</span>";
echo " </a>";
echo " <a class='right carousel-control' href='#myCarousel' data-slide='next'>";
echo " <span class='glyphicon glyphicon-chevron-right'></span>";
echo " <span class='sr-only'>Next</span>";
echo " </a>";
echo "</div>";
}
?>
<?php endforeach; ?>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
<p class="align-right"><a class="button subbutton btn btn-border1" href="flame-spotlight">VIEW ALL</a></p>
</div>
</div>
</div>
</div>

Answer 1

Finally i got the answer where i was not assigning the "active" class to first slider image. so below is my working code .. just posting for loop rest of the code is same..
<?php foreach ($row as $key=>$row): ?>
<?php
$fetured_spotlight = $row->featured_spotlight;
$name = $row->name;
if($fetured_spotlight == 1 )
{
?>
<div class='item <?php echo ($key == 0) ? "active" : ""; ?>'>
<?php
echo "<img src='".$row->thumbnailimage."' alt='".$name."'>";
echo "<div class='carousel-caption1'>";
echo "<p><strong>".$name."</strong></p>";
echo "</div>";
//echo $row->name;
echo "<br />";
}
?>
</div>
<?php endforeach; ?>