如何解决Bootstrap Carousel中从数据库获取的图片堆叠在单个幻灯片的问题

嘿，我看到你在实现Bootstrap轮播时遇到了图片堆叠的问题，这主要是因为代码里的类名和Bootstrap 4不匹配，加上几个小拼写错误导致的。咱们一步步来修复：

核心问题分析 #

你引入的是Bootstrap 4.5.2，但代码里用的是Bootstrap 3的类名和结构，这直接导致轮播组件无法正确识别幻灯片，所有图片都挤在了同一个容器里。

具体修复步骤 #

1. 替换幻灯片类名 #

Bootstrap 4中，轮播的单个幻灯片容器类是carousel-item，而不是你原来的item。把所有item替换成carousel-item，包括第一个带active的幻灯片。

2. 修正轮播控件的类 #

你把左右两个控件都写成了left carousel-control，右边的控件需要改成right carousel-control，否则两个按钮都会触发“上一张”的操作。

3. 修复图标拼写错误 #

你写的glyohicon-chevron-left和glyohicon-chevron-right里多了个字母o，正确的类名是glyphicon-chevron-left和glyphicon-chevron-right。

4. 可选优化：动态生成指示器（推荐） #

你现在手动写了4个指示器，如果数据库返回的图片数量变化，指示器就会和实际幻灯片数量不匹配。可以用PHP动态生成指示器，和图片数量保持一致。

修改后的完整代码 #

<div id="display" class="carousel slide" data-ride="carousel">
    <!-- 动态生成指示器 -->
    <ul class="carousel-indicators">
        <?php 
            $db = mysqli_connect("localhost", "root", "", "gallery") or die(mysqli_error($db));
            $q = "SELECT artefact_id, imagename FROM artefact ORDER BY artefact_id DESC LIMIT 4";
            $results = mysqli_query ($db, $q) or die(mysqli_error($db));
            $total_slides = mysqli_num_rows($results);
            for($i=0; $i<$total_slides; $i++){
                $active_class = $i == 0 ? 'active' : '';
                echo "<li data-target='#display' data-slide-to='$i' class='$active_class'></li>\n";
            }
        ?>
    </ul>

    <!-- 轮播幻灯片 -->
    <div class="carousel-inner">
        <?php 
            // 重置结果集指针，因为上面已经查询过一次
            mysqli_data_seek($results, 0);
            $first_slide = true;
            while($row = mysqli_fetch_array($results)){
                $active_class = $first_slide ? 'active' : '';
                echo "<div class='carousel-item $active_class'> 
                        <img src='images/{$row['imagename']}' class='d-block w-100' alt='Artefact Image'> 
                      </div>\n";
                $first_slide = false;
            }
        ?>
    </div>

    <!-- 左右控制按钮 -->
    <a class="carousel-control-prev" href="#display" 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="#display" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

额外说明 #

• 我把原来的glyphicon替换成了Bootstrap 4推荐的carousel-control-prev-icon和carousel-control-next-icon，如果你坚持要用glyphicon，也可以保留，但要确保拼写正确。
• 给图片加上了d-block w-100类，确保图片能铺满轮播容器，避免出现缩放问题。
• 用mysqli_data_seek重置了结果集指针，因为我们先查询了幻灯片数量，需要重新遍历结果集来生成幻灯片。

内容的提问来源于stack exchange，提问作者Austin Craig