PHP MySQL多列轮播无法正常工作

时间:2020-07-18 11:24:21

标签: javascript html jquery bootstrap-4

我有这个PHP MySQL的代码可以在我的网站上显示店主的名字,该代码可以显示数据,但是当我想要下一张和上一张幻灯片时却无法使用。

    <?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);
    ?>

    <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 % 6 == 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>

以及JS代码:

$('#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));
}
});

这是我的输出: Show my output codes

我的问题当我单击下一张幻灯片的上一张和下一张不起作用时,URL上出现了ID名称(recipeCarousel),我该如何解决?

0 个答案:

没有答案