Solution to the failure of swiper loop carousel in vue project

To put it short, using swiper(4.3.3) in vue(2.), the carousel is still very weird and cannot be looped with autoplay and loop, observer, observeParents and other parameters;

Then you can try writing code like this:

this.$().then((resp) => {
 if(resp &&  == "0"){
   = ;
  this.$nextTick(() => { // Initialize swiper for the next UI frame  ();
  });
 }
})

Yes, the key is that the call to initialize swiper is usually rendered with a v-for loop, and then initialize swiper immediately. However, this may cause v-for to not be rendered at initialization, so swiper may be confused. Then swiper is placed in the next UI frame of $nextTick and then initialized, ensuring that v-for has completed the loop.

initSwiper() {
  if ( != null) return;
   = new Swiper('.swiper-container', {
   loop: true,
   speed: 900,
   autoplay: {
   delay: 3000, //Switch once in 3 seconds   disableOnInteraction: false
   },
   observer: true,// When modifying swiper itself or child elements, automatically initialize swiper   observeParents: true,// When modifying the parent element of swiper, swiper will be automatically initialized 
   pagination: {
   el: '.swiper-pagination',
   // dynamicBullets: true,
   }
  });
  }

The solution to the failure of loop loop carousel in the above article Swiper in the vue project is all the content I share with you. I hope you can give you a reference and I hope you can support me more.