Hi there I am a new at this website, thanks for helping me...
I have this code:
<?php
$select_active_shopes="SELECT tbl_shopkeepers_info.*, tbl_active_shopkeepers.* FROM tbl_shopkeepers_info
INNER JOIN tbl_active_shopkeepers ON(tbl_active_shopkeepers.shopkeeper_id=tbl_shopkeepers_info.shopkeeper_id)
ORDER BY tbl_active_shopkeepers.active_shopkeeper_id DESC";
$rs_active_shopes=mysqli_query($link,$select_active_shopes) or die(mysqli_error($link));
?>
<div class="container-fluid text-center my-3">
<h2 class="font-weight-light"></h2>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<?php
$i = 1;
$next_item = true;
while($row_active_shopes=mysqli_fetch_array($rs_active_shopes))
{
$shop_img=$row_active_shopes['shop_img'];
if ($i == 1) {
echo '<div class="carousel-item active">';
} elseif ($next_item == true) {
echo ' <div class="carousel-item">';
}
?>
<div class="col-md-2">
<div class="card-body">
<div class="circular--portrait">
<img class="img-fluid" src="<?php echo "images/".$row_active_shopes['shop_img'];?>">
</div>
<p class="card-text" id="font"><?php echo $row_active_shopes['location_name'];?></p>
</div>
</div>
<?php
$next_item = false;
if ($i % 4 == 0)
{
echo '</div>';
$next_item = true;
}
$i++;
}
?>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
with js below code:
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
this code is working for displaying data my problem when I clicked the next and previous to the next slide not working.
Output codes:
How I can fix please help me
