長話短說，在vue(2.5.x)中使用swiper(4.3.3)，輪播加了autoplay和loop、observer、observeParents等參數還是很詭異的無法循環輪播；

那么可以這樣寫代碼試試：

this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){  this.swiperImgs = resp.data.data;  this.$nextTick(() => { // 下一個UI幀再初始化swiper  this.initSwiper();  }); }})

是的，關鍵就在于上面這個初始化swiper的調用了，一般會用v-for循環渲染，然后馬上初始化swiper，但是這樣可能導致初始化時v-for還沒渲染完畢，所以可能swiper錯亂， 那么swiper放在$nextTick下一個UI幀再初始化，保證了v-for已經完成循環。

initSwiper() {  if (this.swiper != null) return;  this.swiper = new Swiper('.swiper-container', {   loop: true,   speed: 900,   autoplay: {   delay: 3000, //3秒切換一次   disableOnInteraction: false   },   observer: true,//修改swiper自己或子元素時，自動初始化swiper   observeParents: true,//修改swiper的父元素時，自動初始化swiper    pagination: {   el: '.swiper-pagination',   // dynamicBullets: true,   }  });  }

以上這篇swiper在vue項目中loop循環輪播失效的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。