PHP MySQL multi column Carousel not working

[Talib]

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

Edited July 18, 2020 by Talib

[requinix]

You're using a library to manage the carousel. Check if your browser is reporting any Javascript errors that would explain why it isn't working.