Jump to content
Talib

PHP MySQL multi column Carousel not working

Recommended Posts

Posted (edited)

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:

image.thumb.png.8f6e075866d84f04ed23e2f4c759f8e4.png

 

How I can fix please help me

Edited by Talib

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.