滑动器滑块不适用于foreach循环数据

如何解决滑动器滑块不适用于foreach循环数据

我正在使用swiper滑块显示数据在foreach循环上。但是它仅显示循环的第一个数据，其他未显示或滑动。在检查中，我正在获取循环的数据，但在视图滑块中却无法使用。

<div class="swiper-container text-center">
                        <div class="swiper-wrapper">
                            @foreach($course->course_slots as $slot)
                                    <div class="swiper-slide">
                                        <div class="card card-body">
                                            <h5 class="card-title"></h5>
                                            <p class="text-center">Meets {{ count($slot->schedules) }} more time</p>
                                                
                                          
                                        </div>
                                    </div>
                            @endforeach
                        </div>
                        <br><br>
                    </div>

js部分：

   let swiper = new Swiper('.swiper-container',{
        slidesPerView: 1,spaceBetween: 20,pagination: {
            el: '.swiper-pagination',clickable: true,dynamicBullets: true,},navigation: {
            nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',simulatetouch: false