[2020-09-24] 使用vue-awesome-swiper轮播图插件的坑

最新推荐文章于 2024-08-09 20:45:05 发布

置顶

linear小张

最新推荐文章于 2024-08-09 20:45:05 发布

阅读量336

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/zytt123/article/details/108777462

版权

在使用vue-awesome-swiper插件时遇到自动播放参数配置不生效和loop模式下点击事件失效的问题。通过设置autoplay的delay属性和disableOnInteraction参数解决了自动播放问题。同时，为了解决在loop模式下点击事件不响应，文章探讨了如何获取swiper实例以及在onSlideChangeEnd方法中获取当前vue实例的方法。提供了两种获取swiper实例的方式。

摘要由CSDN通过智能技术生成

使用vue-awesome-swiper轮播图插件的坑

关于配置项中的自动播放autoplay的参数

 Option:{
   
      // 分页器配置
      pagination: {
   
        el: '.swiper-pagination',
        clickable: true,
      },
      //循环
      loop:true,
      //每张播放时长3秒，自动播放
      autoplay:{
   
        delay:3000,
        disableOnInteraction:false
      },
      //滑动速度
      speed:1000
    },