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，将项目更改为carousel-item，将dataslide更改为data-slide，但仍然无法正常工作

Answer 1

似乎您正在使用Bootstrap 3. *旋转木马的类正如您在注释中说的那样，您具有Bootstrap4。旋转木马的结构自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>

dyanamic PHP和引导轮播无法正常工作

1 个答案: