时间戳

首页 > 解决方案 > 带有 php 的多个 Bootstrap 轮播

php - 带有 php 的多个 Bootstrap 轮播

问题描述

我正在尝试使用我的数据库中的图像制作多个引导轮播。问题是，第一个工作正常，我可以在我的图像之间左右移动，一切正常。但我不能在第二个轮播上做任何事情。如果我单击箭头，则不会发生任何事情。我不明白为什么第一个只有效。这是我的代码：

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

    <!-- Indicators -->
    <ul class="carousel-indicators">
        <?php
        $i = 0;
        foreach ($data as $rec) {
            $actives = '';
            if ($i == 0) {
                $actives = 'active';
            }
        ?>
            <li data-target="#imageGallery" data-slide-to="<?php echo $i; ?>" class="<?php echo $actives; ?>"></li>
        <?php
            $i++;
        }
        ?>
    </ul>

    <!-- The slideshow -->
<div class="carousel-inner">
    <?php
    $i = 0;
    foreach ($data as $rec) {
        $actives = '';
        if ($i == 0) {
            $actives = 'active';
        }
    ?>
        <div class="carousel-item <?php echo $actives ?>">
            <a href="#<?php echo $rec['id'] ?>" data-toggle="modal" data-target="#<?php echo $rec['id'] ?>">
                <img src="<?php echo $rec['thumbnailimage'] ?>" class="img-fluid" id="thumbnailimage">
            </a>
        </div>



    <?php $i++;
    } ?>
</div>

标签： php

解决方案

刚刚想通了。我必须将每个模态 ID 放在“imageGallery”之后，现在它工作正常。

<div id="imageGallery<?php echo $row['id']; ?>" class="carousel slide" data-ride="carousel">

推荐阅读