Problem with swiperjs when i make foreach for sliders it stretch first slider in blade?

Problem with swiperjs when i make foreach for sliders it stretch first slider then when load swiperjs it work perfect why this happen may be because the foreach work first before swiperjs execute the js code or css styles but i ensure assetst is work fine

       <div class="Swiper mySwiper "  init="true">
             <div class="swiper-wrapper">
                @foreach ($sliders ?? [] as $slider)
                    <div class="swiper-slide"  lazy="true">
                        <a href="{{ $slider['url'] }}">
                            <div class="slide swiper-lazy"  lazy="true"  style="background-image: url('{{ $slider['image'] }}')"  >
                                <div    loading="lazy" 
                                    style="background-image: url('{{ asset('landing-assets/images/header-slide-without.png') }}'); background-repeat: no-repeat; background-position: right 16%; padding: 2rem; height: 50%;">
                                    @if ($slider['category'])
                                        <h2> {{ $slider['category'] }} </h2>
                                    @endif
                                    <span> {{ $slider['author'] }} </span>
                                    <h3>
                                        <strong style="background: transparent; color: #fff; font-size: 30px;">
                                            {{ $slider['title'] }}
                                        </strong>
                                    </h3>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div> 



     <script>
  	$(document).ready(function () {
    // Add animation class to Swiper container 
      // Swiper: Slider
new Swiper(".mySwiper", {
    loop: true,
    preloadImages: true, // تمكين التحميل المسبق
    lazy: true, // Enable lazy loading
    paginationClickable: true,
    breakpoints: {
        1250: {
            slidesPerView: 4,
        },
        768: {
            slidesPerView: 3,
        },
        480: {
            slidesPerView: 1,
        },
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

});