解决swiper首次加载不轮播的问题

解决swiper首次加载不轮播的问题

这两天利用swiper做轮播图遇到了数据动态首次加载成功后轮播图不自动轮播的问题，
查了一些其他的教程说改一下谷歌浏览器的配置就好了，这对程序猿而言很不严谨
初始化的配置的轮播代码如下：

页面代码如下

<swiper ref="mySwiper" :options="swiper_opt_station" @setTransition="setTransition" >
     <swiper-slide class="swiper-slide" 
     	v-for="d in list_station" :key="d.id" style="cursor: pointer">
     <img :src="d.bannerImage" alt="" @click="swiperChange(d)"></swiper-slide>
</swiper>

部分js配置代码如下

swiper_opt_station:{
        pagination: {
          el: '.swiper-pagination-station',
          clickable: true,
        },
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,//false时用户操作后，重新轮播
          reverseDirection: false,//反向轮播
        },
        noSwiping: true,
        initialSlide: 1,
        centeredSlides: true,
        slidesPerView: 2,
        spaceBetween: '-20%',
        effect: 'coverflow',
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 4,
          slideShadows: false
        },
      },

原因分析：

可能是swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数，从而完成初始化，但是由于动态加载是在初始化完成进行的操作，所以无法确定swiper-wrapper内部swiper-slide的个数，从而导致左右滑动失效

解决方案：

在下图位置添加这两行代码就完美解决啦
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper