Swiper轮播过渡故障：切换第1、2张幻灯片时短暂显示最后一张

嘿，我仔细看了你的问题和提供的代码，这个在Slide1和Slide2切换时短暂闪最后一张的问题，其实是Swiper的loop: true模式和fade过渡效果组合时的一个常见小坑，咱们来拆解下原因和解决办法：

问题原因 #

当你开启loop: true时，Swiper会自动在真实幻灯片的前后克隆一份相同的slide（比如你的Slide4会被克隆到Slide1的前面），用来实现无缝循环的视觉效果。但搭配fadeEffect.crossFade: true的设置时，过渡过程中会让新旧slide同时有透明度变化，这就导致在从最后一张克隆slide切换到Slide1，再到Slide2的瞬间，克隆的Slide4会短暂露出来，尤其是你的过渡速度设得比较慢（2500ms），这个闪烁就更明显了。

解决办法 #

我给你几个可行的方案，你可以根据自己的需求选：

• 调整fadeEffect配置（最推荐）
  把crossFade改成false，这样Swiper会先隐藏当前slide，再显示下一个slide，能直接避免克隆slide的短暂显示问题，代码修改如下：

  fadeEffect: {
      crossFade: false, // 关闭交叉淡入淡出
  },
  

• 添加slide状态跟踪配置
  给Swiper加上watchSlidesProgress: true，让它更精准地跟踪每个slide的进度状态，也能减少这类过渡异常：

  watchSlidesProgress: true, // 新增配置
  

• 调整过渡速度（治标）
  如果不想改变过渡效果，可以适当降低speed的值（比如改成1000ms），让闪烁的时间变短，视觉上没那么明显，但这只是临时缓解，不是根本解决办法。

整理后的完整代码 #

另外注意你代码里重复引入了两次swiper-bundle.min.js，我已经帮你删掉了重复的部分：

<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资源引入 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
    const swiper = new Swiper('.swiper-container', {
        loop: true, // 无缝循环
        autoplay: {
            delay: 2500, // 切换间隔
            disableOnInteraction: false, // 交互后继续自动播放
        },
        effect: 'fade', // 淡入淡出过渡
        fadeEffect: {
            crossFade: false, // 关闭交叉淡入解决闪烁
        },
        speed: 2500, // 过渡时长
        watchSlidesProgress: true, // 优化slide状态跟踪
    });
</script>

你可以试试上面的修改，应该就能解决这个短暂显示最后一张slide的问题啦！

备注：内容来源于stack exchange，提问作者michaelmcgurk