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

【问题标题】：How to show images which loop infinitely in carousel (images getting from database)如何显示在轮播中无限循环的图像（从数据库中获取的图像）
【发布时间】：2019-10-26 16:59:53
【问题描述】：

我有以下代码从数据库中提取图像并显示在 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>

【问题讨论】：

getbootstrap.com/docs/4.0/components/carousel/#options --- 在使用之前从数据库中获取所有图片。将它们放在一个数组中。通过循环遍历该数组在轮播中使用它们，应用您需要的选项以使其连续循环。
这就是你要找的。 infinite-scroll.com
他在寻找什么？这是一个引导轮播，他需要它来循环......
@Dammeul 我对数组做了一些尝试。请参阅我的编辑 1。但它仍然只有 10 次。我没有明白你让它无限循环的意思
Infinite carousel with Twitter Bootstrap的可能重复

标签： php bootstrap-4 carousel

【解决方案1】：

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

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

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

Wrap 是轮播应该连续循环还是硬停。

您将需要 JQuery 和 Bootstrap JS。

【讨论】：

【解决方案2】：

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

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

【讨论】：