Как показать изображения, которые бесконечно зацикливаются в карусели (получение изображений из базы данных)

Question

У меня есть следующие коды, которые извлекают изображения из базы данных и показывают в Bootstrap's - карусели.

<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

Я имею в виду, чтобы включить опцию 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>