Swiper.js使用fade效果时自动播放仅一次后停止问题求助

核心问题分析 #

1. 自动播放仅一次就停止：未开启循环模式，默认情况下Swiper的自动播放到最后一个幻灯片后会停止。
2. 自动切换无fade效果：仅声明effect: 'fade'未配置具体的fade效果参数，导致自动切换时未触发淡入淡出动画。

修改后的代码 #

new Swiper('#agrarisch .swiper-container', {
    slidesPerView: 1,
    effect: 'fade',
    // 开启循环，让自动播放持续循环切换
    loop: true,
    // 配置fade交叉淡入参数，确保自动/手动切换都有淡入淡出效果
    fadeEffect: {
        crossFade: true
    },
    autoplay: {
        delay: 2500,
        // 可选：手动交互后仍保持自动播放（默认交互后停止）
        disableOnInteraction: false
    },
    navigation: {
        nextEl: '#agrarisch .swiper-button-next',
        prevEl: '#agrarisch .swiper-button-prev',
    }
});

说明 #

• 添加loop: true：让幻灯片循环切换，避免自动播放到末尾后停止。
• 配置fadeEffect.crossFade: true：启用前后幻灯片的交叉淡入淡出效果，确保自动切换时也能显示动画。
• disableOnInteraction: false：可选配置，若希望手动点击导航按钮后自动播放继续，可添加该参数。

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