React中Swiper组件自动播放功能失效问题求助

你遇到的问题是Swiper基础功能正常，但配置autoplay后自动播放未生效，核心原因是Swiper 6及以上版本中，自动播放是独立的扩展模块，默认不包含在核心库中，你当前仅导入了核心Swiper，未引入Autoplay模块。

解决步骤： #

1. 导入Autoplay模块
2. 在Swiper初始化配置中添加modules选项，注册Autoplay模块

修改后的完整代码： #

import Swiper from "swiper";
import { Autoplay } from "swiper/modules"; // 导入Autoplay模块
import 'swiper/css';
import 'swiper/css/autoplay'; // 可选，按需导入Autoplay相关样式

useEffect(() => {
    const swiper = new Swiper(".swiper", {
        direction: "horizontal",
        loop: false,
        speed: 1500,
        slidesPerView: 4,
        spaceBetween: 60,
        mousewheel: true,
        parallax: true,
        centeredSlides: true,
        effect: "coverflow",
        coverflowEffect: {
            rotate: 40,
            slideShadows: true
        },
        autoplay: {
            delay: 2000,
            pauseOnMouseEnter: true
        },
        scrollbar: {
            el: ".swiper-scrollbar"
        },
        modules: [Autoplay], // 注册Autoplay模块
        breakpoints: {
            0: {
                slidesPerView: 1,
                spaceBetween: 60
            },
            600: {
                slidesPerView: 2,
                spaceBetween: 60
            },
            1000: {
                slidesPerView: 3,
                spaceBetween: 60
            },
            1400: {
                slidesPerView: 4,
                spaceBetween: 60
            },
            2300: {
                slidesPerView: 5,
                spaceBetween: 60
            },
            2900: {
                slidesPerView: 6,
                spaceBetween: 60
            }
        }
    });

    // Cleanup
    return () => {
        swiper.destroy();
    };
}, []);

额外说明： #

• 若你使用的Swiper版本低于6，无需配置modules选项，但建议升级到最新版本以获得更好的兼容性和功能。
• 当前loop: false，自动播放到最后一张幻灯片会停止，若需要循环播放，可将loop设为true。

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