Bootstrap Carousel - 通过PHP显示每张幻灯片的不同图像

时间:2017-10-21 05:43:35

标签: php twitter-bootstrap

我在旋转木马上工作,每张图片都来自我的PHP数据库。但是,每个幻灯片只显示相同的内容。不确定要包含哪个循环,因为已经有' while'言。

我的数据库结构是这样的。

表名是' items'
第1栏 - id
第2栏 - 名称
第3栏 - 图像

我想要实现的目标是让每张幻灯片都能显示“' image'每个人的身份。

例:
id#1 - potato.jpg
id#2 - tomtato.jpg
等等...

代码如下。

function display_carousel(){   全球$ conn;

    echo "<div id='myCarousel' class='carousel slide' data-ride='carousel'>

              <ol class='carousel-indicators'>
                <li data-target='#myCarousel' data-slide-to='0' class='active'></li>
                <li data-target='#myCarousel' data-slide-to='1' class='active'></li>
              </ol>

              <div class='carousel-inner' role='listbox'>";

                    $sql = "SELECT image FROM items";
                    $result = mysqli_query($conn,$sql);
                    while($row = mysqli_fetch_assoc($result)){
                      extract($row);

                          echo "<div class='item active'>
                            <img src='$image' alt='Image'>
                               <div class='carousel-caption'>
                                <h3>CAPTION</h3>
                              </div>
                          </div>

                          <div class='item'>
                            <img src='$image' alt='Image'>
                               <div class='carousel-caption'>
                                <h3>CAPTION</h3>
                              </div>
                          </div>";
                  }
   echo "</div>";

      echo "<a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'>
                <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>
                <span class='sr-only'>Previous</span>
                </a>
                <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'>
                <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>
                <span class='sr-only'>Next</span>
                </a>
      </div>";

}

1 个答案:

答案 0 :(得分:0)

我要做的第一件事就是通过使用var_dump()来确保您从数据库中获得的内容是您认为的。只要确保你没有从那里得到三个相同的图像。

echo '<pre>';
var_dump($result);
echo '</pre>';