如何用PHP循环实现每页展示3个商品项的Bootstrap轮播功能

问题原因 #

你的代码核心错误是轮播项的闭合逻辑写反了：当前逻辑是每遍历到第0、3、6个（即3的倍数索引）元素时，同时开启新轮播项和关闭轮播项，导致每个轮播项里只插入了1个商品就被关闭，完全不符合单轮播项放3个商品的需求。
同时没有处理商品总数不是3的倍数时，最后一组轮播项标签未闭合的边界情况，会导致HTML结构断裂，轮播组件无法正常识别。

修正后的代码 #

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">  
<?php
$x = 0;
$total = count($result); // 提前获取商品总数
foreach($result as $r)
{
    // 每3个的第一个，开启新轮播项
    if ($x % 3 == 0) {
?>
      <div class="carousel-item <?php if($x == 0){ echo "active"; }?>">
       <div class="album py-5 bg-light">
        <div class="container">
         <div class="row">
<?php
    }
?>
          <div class="col-md-4">
           <div class="card mb-4 box-shadow">
            <img class="card-img-top" style="max-height: 300px"
                            src="../productimages/<?php echo $r['pid']."/".$r['filename']; ?>"
                            alt="Card image cap">
                        <div class="card-body">
                            <p class="card-text">This is a wider card with supporting text
                                below as a natural lead-in to additional content. This content
                                is a little bit longer.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
<?php
    // 每3个的最后一个，或者到了数组末尾，闭合轮播项
    if ($x % 3 == 2 || $x == $total - 1) {
?>
         </div>
        </div>
       </div>
      </div>
<?php
    }
    $x++;
}
?>

</div>

<button class="carousel-control-prev"
    style="width: 3.5%; height: 200px; top: 30%;" type="button"
    data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"><i
        class="bi bi-arrow-left-square-fill text-warning" fill="black"
        style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
        class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next"
    style="width: 3.5%; height: 200px; top: 30%;" type="button"
    data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon bs-orange" aria-hidden="true"><i
        class="bi bi-arrow-right-square-fill text-warning"
        style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
        class="visually-hidden">Next</span>
</button>
</div>

调整说明 #

• 将闭合轮播项的判断条件改为$x % 3 == 2，保证每3个商品为一组放在同一个轮播项中
• 新增$x == $total - 1的判断条件，就算最后一组不足3个商品，也能正常闭合标签，避免HTML结构错误
• 调整计数器$x的递增位置，保证索引计算逻辑正确

内容的提问来源于stack exchange，提问作者Magnus Olofsson