Swiper Carousel glitch - last slide displays during slide transition

Question

I'm using Swiper carousel.

One thing I'm finding is that it'll briefly show the last slide when transitioning between Slides 1 & 2. Why is this? Is this a known glitch?

Here's a JSFiddle and I've included a sample of my script below.

<div class="swiper-container relative w-full text-center text-white curve-bottom overflow-hidden">

        <div class="swiper-wrapper">
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide1" alt="Glasgow" class="w-full h-full object-center object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide2" alt="London" class="w-full h-full object-right-top object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide3" alt="Manchester" class="w-full h-full object-left object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide4" alt="Edinburgh" class="w-full h-full object-center object-cover">
            </div>

        </div>
    
    </div>

    <!-- Swiper.js Script -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
            loop: true, // Ensures seamless looping
            autoplay: {
                delay: 2500, // 7 seconds between slides
                disableOnInteraction: false, // Continues autoplay after interactions
            },
            effect: 'fade', // Smooth fade transition between slides
            fadeEffect: {
                crossFade: true, // Prevents visible overlap of slides
            },
            speed: 2500, // Controls the duration of fade transitions
        });
    </script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Answer 1

I believe it has to do with the initial 'stacking' of the slides and opacity. Whenever forcing opacity: 0!important; it seems to fix the issue. Hope this helps.

.swiper-slide:not(.swiper-slide-active) {
  opacity: 0!important;
}

<div class="swiper-container relative w-full text-center text-white curve-bottom overflow-hidden">

        <div class="swiper-wrapper">
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide1" alt="Glasgow" class="w-full h-full object-center object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide2" alt="London" class="w-full h-full object-right-top object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide3" alt="Manchester" class="w-full h-full object-left object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide4" alt="Edinburgh" class="w-full h-full object-center object-cover">
            </div>

        </div>
    
    </div>

    <!-- Swiper.js Script -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
            loop: true, // Ensures seamless looping
            autoplay: {
                delay: 2500, // 7 seconds between slides
                disableOnInteraction: false, // Continues autoplay after interactions
            },
            effect: 'fade', // Smooth fade transition between slides
            fadeEffect: {
                crossFade: true, // Prevents visible overlap of slides
            },
            speed: 2500, // Controls the duration of fade transitions
        });
    </script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>