I have updated my website to have lazy loading images with swiper.js.

When the page loads and swiper is initiated, swiper sets the height of the div containing the slides wrong. Its briefly sets the height to 460px which is the hieght on desktop. When the images are loaded the height is then updated to 186px which is correct for mobile.

I only noticed this after lazy loading was setup.

How can I stop swiper initiating at the wrong size?

This is what it looks like briefly for a second. Example

The slide image is prefilled with a placeholder image, width 1200px, height 460px. Then CSS setting the image to width 100% and height auto;

This is my script.

    const myswiperban = new Swiper('.swiper-container-ban-wide', {
            loop: true,
            pagination: {
                el: '.swiper-pagination-ban-wide',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next-ban-wide',
                prevEl: '.swiper-button-prev-ban-wide',
            },
            slidesPerView:1,
            freeMode:true,
            autoplay: {
                delay: 3000
            },
            autoHeight:true,
            preloadImages: false,
            lazy: {
                loadPrevNext: true
            },
    });

Any ideas?