Question posted in 
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>
2
Answers
It’s not a glitch. it’s the fade animation as you mentioned in that script when switching to another slide. Remove the fade animation will resolve the issue and hope it will work as you expect.
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.