时间戳

首页 > 解决方案 > 如何获取数据并显示到 Carousel - Bootstrap 4 & PHP

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

问题描述

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

在此处输入图像描述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>

标签： phpmysqlibootstrap-4

解决方案

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

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

推荐阅读