swiper的autoplay属性自动轮播无效果的原因

最新推荐文章于 2025-06-17 22:41:20 发布

荒古玄枫

最新推荐文章于 2025-06-17 22:41:20 发布

阅读量5.4k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue swipe

本文链接：https://blog.youkuaiyun.com/weixin_48082725/article/details/117552671

这篇博客介绍了如何在Swiper中因为版本问题单独引入SwiperCore和Autoplay模块，通过设置autoplay属性实现自动轮播功能。具体步骤包括导入模块、启用Autoplay、配置轮播参数如延迟时间和是否允许交互后暂停轮播等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为swiper的版本原因需要单独引用：

import SwiperCore, { Autoplay } from 'swiper/core';
SwiperCore.use([Autoplay]);
// 然后autoplay的自动轮播属性可以使用了
new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 3,
        loop: true, // 循环模式选项
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        autoplay:{ 
          delay:500,
          disableOnInteraction:false, //解决滑动后不能轮播的问题
        }, 
        direction: 'vertical', // 垂直轮播
      })