在Laravel Blade的@foreach循环中动态创建SwiperJS实例

1. 调整Blade模板，给每个轮播容器添加唯一标识 #

在@foreach循环里，利用循环索引$rI给每个Swiper容器生成唯一类名，同时保留一个通用类方便JS批量选择：

@foreach($rowItem as $rI => $row)
    <div class="swiper dynamic-swiper swiper-{{ $rI }} menu-wrapper">
        <div class="swiper-wrapper">
            @foreach($row->variables as $key => $variable) {{-- 替换为你实际的子数据集合 --}}
                <div class="swiper-slide">
                    <img src="{{ $variable->img_link }}" alt="轮播图"> {{-- 修正HTML标签，用Blade语法输出变量 --}}
                </div>
            @endforeach
        </div>
        {{-- 可选：按需添加分页、导航按钮等组件 --}}
        <div class="swiper-pagination"></div>
    </div>
@endforeach

2. 动态初始化所有Swiper实例 #

不用手动逐个写swiper1、swiper2，两种实现方法任选：

方法一：批量遍历初始化（适合所有轮播配置相同） #

等DOM加载完成后，找到所有带通用类的容器，逐个初始化：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有需要初始化的轮播容器
    const swiperContainers = document.querySelectorAll('.dynamic-swiper');
    
    swiperContainers.forEach(container => {
        new Swiper(container, {
            // 你的轮播配置参数，示例：
            loop: true,
            slidesPerView: 3,
            spaceBetween: 15,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
            // 其他配置按需添加
        });
    });
});

方法二：Blade循环输出初始化代码（适合轮播配置不同） #

如果每个轮播需要独立配置，直接在Blade里跟着循环输出对应的JS初始化代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
    @foreach($rowItem as $rI => $row)
        new Swiper(".swiper-{{ $rI }}", {
            // 可根据$row的属性动态调整配置，示例：
            slidesPerView: {{ $row->show_count ?? 2 }},
            loop: {{ $row->allow_loop ? 'true' : 'false' }},
            pagination: {
                el: '.swiper-pagination'
            }
        });
    @endforeach
});
</script>

注意点 #

• 第一种方法更简洁，适合所有轮播配置一致的场景，无需依赖Blade生成JS代码。
• 第二种方法灵活性更高，能根据每个$row的属性给对应轮播设置个性化参数。
• 原代码中的<image>是错误HTML标签，需改为<img>；Blade变量必须用{{ }}包裹才能正确输出。

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