vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)

Posted heyushuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)相关的知识,希望对你有一定的参考价值。

在项目中使用vue-awesome-swiper如果loop和autoplay总是出现各种问题,第一次加载的时候,轮播是不动的,需要重新加载一下swiper才会轮播

解决方案:

//轮播设置
swiperOption: {
  direction: ‘vertical‘,
  observer:true,//修改swiper自己或子元素时,自动初始化swiper 
  observeParents:true,//修改swiper的父元素时,自动初始化swiper 
  loop:true,
  autoplay: {
    delay: 2000,
  disableOnInteraction: false
  }
}

需要添加上两个属性,这样达到一个初始化swiper的目的

observer:true,//修改swiper自己或子元素时,自动初始化swiper 
observeParents:true,//修改swiper的父元素时,自动初始化swiper 

 

以上是关于vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)的主要内容,如果未能解决你的问题,请参考以下文章

vue-awesome-swiper的正确使用姿势

jQuery mouse and lunbo

解决:使用 swiper 自动轮播图片,当拖动过 swiper 内的内容时,导致不继续自动轮播

我的轮播和我的自定义动画中的问题

js实现图片轮播图

在jsp中重复自动轮询数据库