Vue以CDN方式调用Swiper轮播异常

问题概览:

嫌用组件式调用vue-swiper麻烦,以CDN的方式调用swiper,结果轮播的图不动了!

爬了半天百度和谷歌都无解决方案,最后曲线救国的方式解决了问题。 

解决方法:

在创建swiper时为其设置一个定时器即可解决问题!

    bottleLineMove = () => {
      setTimeout(() => {
        this.bottleSwiperOne = new Swiper('#bottleLineOne', {
          loop: true,
          slidesPerView: 4,
          spaceBetween: 10,
          // centeredSlides: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
        })
        this.bottleSwiperTwo = new Swiper('#bottleLineTwo', {
          loop: true,
          slidesPerView: 4,
          spaceBetween: 10,
          // freeMode: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
        })
      }, 10)
    }

   

最后,嘻嘻!

猜你喜欢

转载自www.cnblogs.com/Tylerrrkd/p/9165886.html