我有一個滑塊，我想設置為自動播放，并有一個漸變效果。當使用正常的幻燈片效果時，一切都很好，但是在我添加了正面效果后，它在1次漸變后就停止工作了。它也沒有褪色，只是立即切換到下一張幻燈片，只有當我手動使用鼠標滑動時，它才會顯示褪色效果。

可能是什么問題？

在我的js文件中，我像這樣導入“EffectFade ”:

import Swiper, {Autoplay, Navigation, Pagination, EffectFade} from 'swiper';
Swiper.use([Autoplay, Navigation, Pagination, EffectFade]);

然后我的刷卡密碼是:

new Swiper('#agrarisch .swiper-container', {
    slidesPerView: 1,
    // spaceBetween: 30,
    effect: 'fade',
    autoplay: {
        delay: 2500,
    },
    navigation: {
        nextEl: '#agrarisch .swiper-button-next',
        prevEl: '#agrarisch .swiper-button-prev',
    }
});

示例視頻

我也遇到了同樣的問題。 在我的例子中，我通過加載& quotswiper-bundle . min . CSS & quot；而不是& quotswiper . min . CSS & quot；。

我通過包含漸變效果CSS來修復它:

// Node
@import "./node_modules/swiper/swiper";
@import "./node_modules/swiper/modules/effect-fade/effect-fade";

任何與swiper滑塊中的自動播放效果淡入淡出作斗爭的人都必須嘗試這個例子:

var swiper = new Swiper(".home-slider", {
    slidesPerView: 1,
    spaceBetween: 30,
    effect: "fade",
    centeredSlides: true,
    fadeEffect: { crossFade: true },
    autoplay: {
      delay: 7500,
      disableOnInteraction: true,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
       navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
});