Question

我要在这里执行的操作是从包含图像网址的数组中创建一个引导轮播，我看不到我搞砸了，目前它显示为：https://www.we-love-unicorns.club/301-baby-unicorn-top/，其中一个图像彼此重叠

到目前为止，

我的代码：

<!-- Dynamic carousel -->

<div id="mainCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">

    <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>

    <?php

        for ($c = 1; $c <= count($p['images']); $c++) {
            echo "<li data-target=\"#mainCarousel\" data-slide-to=\"".$c++."\"></li>";
        } 

    ?>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
    <?php

        for ($c = 0; $c <= count($p['images']); $c++) {
            echo "<img src=\"{$p['images'][$c]}\">";
        } 

    ?>
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#mainCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="right carousel-control" href="#mainCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a> 
</div>

<!-- Dynamic carousel -->

在这一部分： count（$ p ['images']）; 是我对数组中的图像进行计数的地方，然后从那里开始显示，我觉得我错过了一些小东西，但我看不到哪里，任何帮助将不胜感激！

Answer 1

基于Bootstrap 4.0版文档，它应该仅为carousel-item而非item。此外，每个carousel-item只能有一张图片。

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

图像阵列中的动态引导轮播

1 个答案: