如何显示轮播中无限循环的图像（从数据库获取的图像）

Question

我有以下代码可以从数据库中提取图像并显示在 Bootstrap 的 - 轮播中。

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
 <ol class="carousel-indicators">
 <?php
 $carouselImageSql = "SELECT * FROM indexPageElements WHERE carouseImage = '1'";
 $carouselImageResult = mysqli_query($conn, $carouselImageSql);

 $i = 0;
 while($carouselImageRow = mysqli_fetch_array($carouselImageResult)){
  $imageLocation = $carouselImageRow['carouseImageLocation'];
  
  echo '<li data-target="#carouselExampleIndicators" data-slide-to="" ></li>';
 ?>
 </ol>
 <div class="carousel-inner" role="listbox">
 <?php
  if($i == 0){
   echo '<div class="carousel-item active">
     <img class="d-block img-fluid" src="images/'.$imageLocation.'" alt="First slide">
   </div>';
  }else{
   echo '<div class="carousel-item">
     <img class="d-block img-fluid" src="images/'.$imageLocation.'" alt="First slide">
   </div>';
  }
  
  $i += 1;
 }
 ?>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我的问题

我的问题是，一旦从数据库中取出所有图片，轮播就不再显示这些图片。有谁知道如何从数据库中抓取图片并在轮播中显示但同时无限循环？

编辑 1

我做了以下循环10次。但还是只有10次

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
 <ol class="carousel-indicators">
 <?php
 $carouselImageSql = "SELECT * FROM indexPageElements WHERE carouseImage = '1'";
 $carouselImageResult = mysqli_query($conn, $carouselImageSql);
 $carouselImageCount = mysqli_num_rows($carouselImageResult);
  
 $imageLocation = array();
 
 while($carouselImageRow = mysqli_fetch_array($carouselImageResult)){
  $imageLocation[] = $carouselImageRow['carouseImageLocation'];
  echo '<li data-target="#carouselExampleIndicators" data-slide-to="" ></li>';
 }

 ?>
 </ol>
 <div class="carousel-inner" role="listbox">
 <?php
  $i = 0;
  for($x = 0; $x <= 10; $x++){
   foreach($imageLocation as $loc){
    if($i == 0){
     echo '<div class="carousel-item active">
       <img class="d-block img-fluid" src="images/'.$loc.'" alt="First slide">
     </div>';
    }else{
     echo '<div class="carousel-item">
       <img class="d-block img-fluid" src="images/'.$loc.'" alt="First slide">
     </div>';
    }
    $i += 1;
   }
  }
 ?>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

您可以尝试用这个短片 javascript 激活您的轮播。

<script>
$(document).ready(function(){
    // Activate Carousel
    $("#carouselExampleIndicators").carousel();
});
</script>

Answer 2

我的意思是开启wrap选项，如下：

$("#carouselExampleIndicators").carousel({ wrap: true });

https://getbootstrap.com/docs/4.0/components/carousel/#options:

Wrap 是旋转木马是否应该连续循环或硬停止。

你将需要 JQuery 和 Bootstrap JS。

如何显示轮播中无限循环的图像（从数据库获取的图像）

How to show images which loop infinitely in carousel (images getting from database)

php

carousel

bootstrap-4