如何通过添加活动类从Bootstrap轮播中动态地从数据库中插入src [英] How to insert src dynamically from database in Bootstrap carousel by adding active class

问题描述

我的页面中有一个轮播，如下所示:

I have a Carousel in my page as below

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to=""></li>
    <li data-target="#carouselExampleIndicators" data-slide-to=""></li>
    <li data-target="#carouselExampleIndicators" data-slide-to=""></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="images/katakali.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="images/kappilParavur.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="images/temple.png" alt="Third slide">
    </div>
  </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>

我需要的

我想使用MySQL-php代码从数据库中获取图像名称

I want to get the image names from database using the MySQL - php codes as below

<?php
$carouselImageSql = "SELECT * FROM indexPageElements WHERE carouseImage = '1'";
$carouselImageResult = mysqli_query($conn, $carouselImageSql);
$carouselImageRow = mysqli_fetch_array($carouselImageResult);
$imageLocation = $carouselImageRow['carouseImageLocation'];
?>

然后如下所示插入到我的html中

And then insert into my html as below

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
	<ol class="carousel-indicators">
	<?php
	while($carouselImageRow){
		echo '<li data-target="#carouselExampleIndicators" data-slide-to="" ></li>';
	?>
	</ol>
	<div class="carousel-inner" role="listbox">
	<?php
		echo '<div class="carousel-item active">
			  <img class="d-block img-fluid" src="'.$imageLocation.'"alt="First slide">
			</div>';
	}
	?>
	</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>

我的问题

问题出在传送带中的active类.当我循环使用while($carouselImageRow)时，它总是添加active类，因此轮播无法正常工作.我应该如何在循环时仅将active类添加到第一组数据，然后在第一组数据之后不再添加该active类?

The issue is with the active class in the carousel. when I loop through using while($carouselImageRow) it is always adding active class and thus carousel not working correctly. How should I add active class only to the first set of data while looping and then don't add that active class anymore after the first set?

编辑1

我将整个内容重写如下.但仍然什么也没显示

I rewrite the whole thing as below. But still not showing anything

<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);
		
	
		
	while($carouselImageRow = mysqli_fetch_array($carouselImageResult)){
		$imageLocation = $carouselImageRow['carouseImageLocation'];
		$i = 0;
		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>

编辑2

在while循环之外指定计数器后，它可以工作.请参见下面的工作模型代码

After gave the counter outside the while loop, it works. Please see the codes below for the working model

<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);
//	$carouselImageRow = mysqli_fetch_array($carouselImageResult);
		
	
			
	$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>

推荐答案

您可以在while语句中使用计数器 我注意到您在轮播指示器的循环中有未关闭的项目，因此您也需要为此做一个单独的循环.同样，您在循环内打开了carousel-inner div，因此在循环内您将获得许多div的打开但未关闭的信息.希望能有所帮助.请参见下面的轮播项目循环中的计数器.

You could possibly use a counter in the while statement I notice that you have unclosed items in the loop for the carousel indicators, so you will need to do a separate loop for that also. Also you opened the carousel-inner div inside the loop, so you would get many div's open but not closed within the loop. Hope that helps. See the counter in the carousel item loop below.

<div class="carousel-inner" role="listbox">
<?php
$count  = 0;
while($carouselImageRow){
    echo '<div class="carousel-item active">
          <img class="d-block img-fluid" src="'.$imageLocation.'"alt="First slide">
        </div>';
}
?>
</div>

这篇关于如何通过添加活动类从Bootstrap轮播中动态地从数据库中插入src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！