Swiper.js淡入淡出效果循环异常问题的解决方法

设置5张轮播幻灯片后出现切换异常：无法从第4张直接切换到第5张，第4张会触发两次切换，且第5张未显示就直接跳转到第1张。

HTML代码 #

<div class= "swiper-wrapper">
    <div class="swiper-slide">
        <img src="./images/img01-2.png" alt="">
    </div>
    <div class="swiper-slide">
        <img src="./images/img01-5.png" alt="">
    </div>
    <div class="swiper-slide">
        <img src="./images/img01-3.png" alt="">
    </div>
    <div class="swiper-slide">
        <img src="./images/img01-1.png" alt="">
    </div>
    <div class="swiper-slide">
        <img src="./images/img01-4.png" alt="">
    </div>
</div>

JS配置代码 #

const slideOption1 = {
    effect: 'fade',
    speed: 400,
    slidesPerView: 'auto',
    autoplay: {
        delay: 400,
        disableOnInteraction: false,
    },
    // loop:true,
    loopedSlides: 5,
    loopAdditionalSlides: 5,
};

已尝试的代码 #

s1.on('slideChange', function() {
    if(s1.realIndex == 3) {
        s1.slideToLoop(5,400)
    }
})

问题原因与修复方案 #

核心问题是错误使用了循环模式专属配置，但未开启循环：loopedSlides和loopAdditionalSlides是仅为loop: true设计的配置项，关闭循环时启用它们会干扰Swiper的索引计算逻辑，导致切换混乱。

修复步骤：

• 不需要循环轮播：直接删除loopedSlides和loopAdditionalSlides配置，保持默认loop: false即可。
• 需要循环轮播：取消注释loop: true，loopedSlides: 5可保留（常规轮播也可省略），删除loopAdditionalSlides（默认值足够覆盖常规场景）。

另外，你尝试的事件监听逻辑存在索引错误：slideToLoop(5)超出了0-4的有效索引范围，会导致跳转异常。

修复后的配置示例

非循环模式：

const slideOption1 = {
    effect: 'fade',
    speed: 400,
    slidesPerView: 'auto',
    autoplay: {
        delay: 400,
        disableOnInteraction: false,
    },
};

循环模式：

const slideOption1 = {
    effect: 'fade',
    speed: 400,
    slidesPerView: 'auto',
    autoplay: {
        delay: 400,
        disableOnInteraction: false,
    },
    loop: true,
    loopedSlides: 5,
};

内容的提问来源于stack exchange，提问作者jun