如何为给定的Swiper滑块实例添加Autoplay自动播放功能？

要给你的垂直方向mainSwiper和水平方向swiperH添加自动轮播功能，只需在Swiper初始化配置中加入autoplay选项即可。以下是修改后的完整代码：

修改后的JavaScript代码 #

// 垂直滑块（mainSwiper）
var mainSwiper = new Swiper(".swiper-container-v", {
    direction: "vertical",
    keyboard: true, // 修正原代码拼写错误：kyboard → keyboard
    pagination: {
        el: ".swiper-pagination-v",
        clickable: true
    },
    mousewheel: true,
    slideToClickedSlide: true,
    // 添加自动播放配置
    autoplay: {
        delay: 4000, // 切换间隔，单位：毫秒
        disableOnInteraction: false // 可选：用户交互后继续自动播放，默认true（交互后停止）
    }
});

// 水平滑块（swiperH）
var swiperH = new Swiper(".swiper-container-h", {
    spaceBetween: 50,
    pagination: {
        el: ".swiper-pagination-h",
        clickable: true
    },
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // 添加自动播放配置
    autoplay: {
        delay: 3500, // 切换间隔，单位：毫秒
        disableOnInteraction: false // 可选：用户交互后保持自动播放
    }
});

关键配置说明 #

• autoplay.delay：控制滑块自动切换的时间间隔，可根据需求调整数值（如3000表示3秒切换一次）
• disableOnInteraction：默认值为true，即用户点击分页器、导航按钮或手动滑动后，自动播放会停止；设为false则交互后仍继续自动播放
• 垂直滑块的自动播放方向会跟随direction: "vertical"自动适配，无需额外设置

HTML部分无需修改 #

你的HTML代码已正确引入Swiper 4.3.3版本的CSS和JS文件，该版本的Autoplay功能为内置模块，无需额外引入扩展。

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