动态 php 和引导轮播不起作用

Question

我有这段代码不会制作轮播，而是将所有图像放在一起，图像滑动不起作用。

代码如下：

<div id="mycarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  <?php
    $results = mysqli_query($mysqli, "SELECT * FROM `posts`");

    $extensions_arr = array("svg", "jpeg", "jpg", "png");

    while($row = mysqli_fetch_array($results)) {
      if(in_array($row['postFileType'], $extensions_arr)) {
   ?>
     <div class="item">
       <img src="<?php echo $row['post']; ?>" style="height: 25vh;" />
     </div>
  <?php
      }
    }
  ?>
  </div>
  <a href="#mycarousel" class="left carousel-control" dataslide="prev" role="button">
    <i class="fa fa-angle-left prevSlide"></i>
  </a>
  <a href="#mycarousel" class="right carousel-control" dataslide="next" role="button">
    <i class="fa fa-angle-right nextSlide"></i>
  </a> 
</div>

更新代码：

    <div id="mycarousel" class="carousel slide" data-ride="carousel">
                              <div class="carousel-inner">
                              <?php
                                $results = mysqli_query($mysqli, "SELECT * FROM `posts`");

                                $extensions_arr = array("svg", "jpeg", "jpg", "png");

                                  while($row = mysqli_fetch_array($results)) {
                                    if(in_array($row['postFileType'], $extensions_arr)) {
                                      ?>
                                      <div class="carousel-item">
                                        <img src="<?php echo $row['post']; ?>" style="height: 25vh;" />
                                      </div>
                                      <?php
                                    }
                                  }
                              ?>
                              </div>
                              <a class="carousel-control-prev" href="#mycarousel" 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="#mycarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
                              </div>

还有这些被改变的类： 我将 dataride 更改为 data-ride 将 item 更改为 carousel-item 将 dataslide 更改为 data-slide 但它仍然不起作用

Answer 1

看起来您正在使用 Bootstrap 3.* 轮播的类正如您在 cmets 中所说，您拥有 Bootstrap 4。自 Bootstrap 4 以来，轮播结构发生了变化。尝试将您的代码转换为新的 Bootstrap 轮播结构.

https://getbootstrap.com/docs/4.5/components/carousel/

编辑：

您忘记激活某项我已更改您的代码。 （未测试）

<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <?php
        $results = mysqli_query($mysqli, "SELECT * FROM `posts`");

        $extensions_arr = array("svg", "jpeg", "jpg", "png");

        $index = 0;
        while ($row = mysqli_fetch_array($results)) {
            if (in_array($row['postFileType'], $extensions_arr)) {
        ?>
                <div class="carousel-item <?= ($index === 0 ? 'active' : '') ?>">
                    <img src="<?= $row['post']; ?>" style="height: 25vh;" />
                </div>
        <?php
            }
            $index++;
        }
        ?>
    </div>
    <a class="carousel-control-prev" href="#mycarousel" 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="#mycarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>