Как получить данные и отобразить их в 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 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 2

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

Answer 3

Карусальная структура похожа на

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