使用Owl Carousel时，如何用嵌套foreach匹配slide_images与why_us数据？

我明白你的需求：前3张轮播图分别对应why_us表的3条数据，后面的轮播图按需处理，而且没法修改数据库结构、也不能用ID做SQL关联。你之前的代码问题在于每个轮播项里都循环输出了所有的why_us内容，导致每张图下面都带着3个why_us的模块，这显然不是你想要的效果。

我们可以利用foreach的索引来实现精准匹配——既然两张表的顺序是固定的（假设你从数据库取出的顺序就是你需要的对应关系），直接通过轮播图的索引去取对应位置的why_us数据即可，完全不需要嵌套遍历所有why_us项。

修改后的代码如下：

<div class="home_area">
    <!-- start Carousel -->
    <div class="owl-carousel block_1">
        <?php if(is_array($slide_image)){ 
            // 遍历轮播图时同时获取当前项的索引$index
            foreach($slide_image as $index => $src){ ?>
            <div class="overlay-text">
                <div class="carousel_item" style="background-image:url('<?php echo base_url(); echo $src->url; ?>');"></div>
                <div class="text-layer">
                    <!--============ start we us ================ -->
                    <?php 
                    // 仅在前3张轮播图显示对应的why_us数据（索引0、1、2）
                    if(!empty($why_us) && $index < count($why_us)){ 
                        // 根据索引直接取出对应的why_us条目
                        $we = $why_us[$index];
                    ?>
                    <div class="we">
                        <div class="container">
                            <div class="row">
                                <div class="box">
                                    <h6><?php echo $we->name; ?></h6>
                                    <div class="text"><?php echo $we->desc; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>
                    <!--============= end we us ========== -->
                </div>
            </div>
        <?php } }?>
    </div>
    <!-- end Carousel -->
</div>

关键修改点说明： #

• 给轮播图的foreach新增索引变量$index，通过foreach($slide_image as $index => $src)获取当前轮播图的位置（从0开始计数）。
• 移除了原代码中遍历所有why_us的循环，改为根据索引直接匹配对应的数据项，仅在轮播图索引小于why_us数据总数时显示内容（也就是前3张图）。
• 如果你希望后续轮播图循环复用why_us的数据（比如第4张显示第1条，第5张显示第2条，以此类推），可以把取值逻辑改成$we = $why_us[$index % count($why_us)]，就能实现循环对应效果。

这样修改后，前3张轮播图就会分别对应why_us的3条数据，每张图只显示对应的那一条，完全符合你的需求，而且不需要改动数据库或者做复杂的SQL关联。

内容的提问来源于stack exchange，提问作者M-Farah