如何获取数据并显示到 Carousel - Bootstrap 4 & PHP

Question

这是我的 Bootstrap 用户界面，数据是从数据库中获取的。如您所见，轮播正在下降，无法单击下一步它只是下降。从页面。

1

请看上图

我获取的数据是文本而不是图像

这是我的代码

          <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Carousel indicators -->
          <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>  

    <?php
        $dataid;
                $data = mysqli_query($con,"SELECT * FROM feedback");
                    $count = mysqli_num_rows($data);
                    if ($count != 0) {
                        echo '
                        <div class="row ">';
                    while($row = mysqli_fetch_array($data)) { 
                    echo '             
                    <!-- Wrapper for carousel items -->
                    <div class="carousel-inner">        
                        <div class="item carousel-item active">
                            <p class="testimonial">'. $row['comment'] .'</p>
                            <p class="overview"><b>Anonymous</b></p>
                            <div class="star-rating">
                                <ul class="list-inline">
                                    <a href="index.html"><li class="list-inline-item"><i class="fa fa-heart" ></i></li></a>&nbsp;&nbsp;
                                    <a href="index.html"><li class="list-inline-item"><i class="fas fa-thumbtack" ></i></li></a>&nbsp;&nbsp;
                                    <a href="index.html"><li class="list-inline-item"><i class="fas fa-archive"></i></li></a>&nbsp;&nbsp;
                                    <a href="index.html"><li class="list-inline-item"><i class="fa fa-trash" ></i></li></a>&nbsp;&nbsp;
                                    <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                </ul>
                            </div>
                        </div>      
                    </div>

                    ';              
            }
          }
        ?>
                    <!-- Carousel controls -->
                <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                    </a>
                    <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>    
                </div>

Answer 1

轮播结构是这样的

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

所以你需要重复carousel-item

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
   <?php while($row = mysqli_fetch_array($data)) { ?>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
   <?php } ?>
  </div>
</div>

Answer 2

如果您需要在 Carousel 中显示来自数据库的文本，那么只需为图像提供一些填充和背景颜色

<div class="carousel-item active">
  <img src="<?php echo imageSrcFromDb; ?>" width="1100" height="500">
  <div class="carousel-caption">
    <h3><?php echo ; //Your Heading text ?></h3>
    <p><?php echo ; //Some description ?></p>
  </div>   
</div>

Answer 3

<!-- Wrapper for carousel items -->
<div class="carousel-inner">   
<?php
while($row = mysqli_fetch_array($data)) { 
echo '                  
      <div class="item carousel-item">
        <p class="testimonial">'. $row['comment'] .'</p>
        <p class="overview"><b>Anonymous</b></p>
        <div class="star-rating">
          <ul class="list-inline">
            <a href="index.html"><li class="list-inline-item"><i class="fa fa-heart" ></i></li></a>&nbsp;&nbsp;
            <a href="index.html"><li class="list-inline-item"><i class="fas fa-thumbtack" ></i></li></a>&nbsp;&nbsp;
            <a href="index.html"><li class="list-inline-item"><i class="fas fa-archive"></i></li></a>&nbsp;&nbsp;
            <a href="index.html"><li class="list-inline-item"><i class="fa fa-trash" ></i></li></a>&nbsp;&nbsp;
            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
          </ul>
        </div>
      </div>      

   ';              
  }   
?>
</div>

while 循环应该在 carousel-inner 类中。