Laravel Blade 如何实现两个div的foreach循环关联数据同步展示

实现逻辑分两步，不需要合并两个DOM区块，就能保证图文完全匹配同步。

• 模板层循环对齐
  两个区块遍历同一个$listings数组即可，数组遍历顺序固定，生成的slide索引会天然一一对应。注意图片区块的静态地址要替换为你Listing模型里的实际图片字段，示例代码如下：

<div class="banner-slider-image">
    <div class="swiper-container" id="imageSwiper">
        <div class="swiper-wrapper">
            @if(count($listings) > 0)
                @foreach($listings as $listing)
                <!-- 图片轮播项 与下方内容轮播项顺序完全对应 -->
                <div class="swiper-slide">
                    <div class="bg" style="background-image: url({{ $listing->cover_image }});"></div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

<div class="banner-slider-content">
    <div class="side-text">AVANT</div>
    <div class="swiper-container banner-slider" id="contentSwiper">
        <div class="swiper-wrapper">
            @if(count($listings) > 0)
                @foreach($listings as $listing)
                    <!-- 内容轮播项 -->
                    <div class="swiper-slide">
                        <div class="content-outer">
                            <div class="content-box">
                                <div class="inner">
                                    <h5>{{$listing->first_name}} {{$listing->last_name}}</h5>
                                    <h1><span>{{$listing->name}}</span></h1>
                                    <div class="text">{{$listing->property_description}}.</div>
                                    <div class="link-box"><a href="#">View Listing</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

代码里给两个swiper容器分别加了id，用于后续JS绑定联动，$listing->cover_image请替换为你项目里实际存储房源封面图的字段名。

• JS层联动配置
  初始化Swiper时通过controller参数把两个实例绑定，保证任意一侧切换时另一侧同步运动，代码如下：

// 初始化图片轮播
const imageSwiper = new Swiper('#imageSwiper', {
    loop: true,
    speed: 800,
    // 此处保留你原有图片轮播的所有配置项，比如自动播放、切换效果参数等
});

// 初始化内容轮播
const contentSwiper = new Swiper('#contentSwiper', {
    loop: true,
    speed: 800,
    // 此处保留你原有内容轮播的所有配置项，比如分页器、导航按钮等
    controller: {
        control: imageSwiper,
    }
});

// 绑定反向控制：图片轮播切换时同步触发内容轮播
imageSwiper.controller.control = contentSwiper;

• 注意事项
  • 两个Swiper实例的核心配置必须完全一致，包括loop开关、切换速度speed、自动播放参数等，否则会出现索引错位
  • 如果开启loop模式，需要给两个实例都设置相同的loopedSlides参数，值等于$listings的总条数
  • 如果使用Swiper 5以下版本，不需要写外层controller对象，直接在初始化参数里加control: 对应实例变量即可

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