CODEWITHSUNDEEP
phpbootstrap-4carousel
Anu
Anu

Reputation: 1129

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

I have the following codes which pull images from a database and show in Bootstrap's - carousel. 

<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>

My Issue

My problem here is, once all the images pulled out from database, carousel stop showing those pictures again. Does anyone knows how to grab the picture from database and show it in carousel but at the same time loops infinitely?

Edit 1

I did the following to loop it for 10 times. But still it is only for 10 times

<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>

Upvotes: 0

Views: 720

Answers (2)

Adam
Adam

Reputation: 1304

What I mean is to turn on the wrap option, as below:

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

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

Wrap is whether the carousel should cycle continuously or have hard stops.

you will need JQuery and Bootstrap JS.

Upvotes: 1

Marius Danciu
Marius Danciu

Reputation: 178

You can try to activate your carousel with this short javascript.

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

Upvotes: 0

Related Questions