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)
    }

   

最后,嘻嘻!

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM