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次。但仍然只有十次

<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

我的意思是打开wrap选项，如下所示：

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

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

Wrap是轮播是否应该连续循环或是否有硬停止。

您将需要JQuery和Bootstrap JS。

Answer 2

您可以尝试使用此简短的javascript激活轮播。

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

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

2 个答案: