Swiper Slide element transitioning Vertically as well on Page load

[MacTavish-69]

The slide transitions vertically (sliding down) as well along with horizontal sliding. This occurs only when page is load. This happens on both Mobile & Desktop.
I am not sure if this is a bug or if it's supposed to be this way and there's a way to turn it off.

Video Demo

Code

<section id="home-banner-1" class="pt-28 md:pt-26">
    <!-- Swiper -->
    <!-- .homepage-banner-swiper {width: 100%;} -->
    <div class="swiper swiper-container homepage-banner-swiper text-initial">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                
            </div>
            <div class="swiper-slide">
                
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            // Optional parameters
            autoHeight: true, 
            autoplay: {
                delay: 8000,
            },
            loop: true,
            speed: 3000,
        });
    </script>
</section>

Your comments & insights are appreciated. Thanks!

[Arhell]

You can set the wrapper to a min-height to make the effect less obvious.

[MacTavish-69]

I will try that, but I can't figure out why it happens this way? sometimes it happens and sometimes it doesn't.
What I have observed is that on page load, sometimes, the image is already transitioning and you will see this effect. Otherwise, it's normal

[MacTavish-69]

The min-height did not help me. However, Initializing the on swiper on DOMContentLoaded or load event fixed the issue for me. If swiper initialization is delayed, your image will be just a normal image, as soon as the swiper is initialized, the counter will start and your slides will changes as per your delay and speed parameters.

[MacTavish-69]

The min-height did not help me. However, Initializing the on swiper on DOMContentLoaded or load event fixed the issue for me. If swiper initialization is delayed, your image will be just a normal image, as soon as the swiper is initialized, the counter will start and your slides will changes as per your delay and speed parameters.

Note: This may not work in advanced usages of Swiper where you may have multiple slides in view. This was tested on a full width single slide swiper