vue中swiper的使用

问题原因：需要一个能轮播的swiper组件，遇到的主要问题：
1.操作组件后自动轮播停止了
解决： disableOnInteraction: false, //设置操作swiper不会停止自动循环
2.循环开始的图片是从最后一张开始的，不是第一张
解决 ： initialSlide: 1, //设置从第一张图片开始循环否则会从最后一开始
前端

    <div class="inf-img">
       <swiper 
          ref="swiper" 
          :options="swiperOption"
          >
          <swiper-slide v-for="(item,index) in fileList" :key="index">
            <img  v-if="item" :src=item>
            <img  v-else  src="xxxxxx"  style="width: 100%; ">
          </swiper-slide>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination" slot="pagination" ></div>
        </swiper>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
      </div>

data中参数定义

      swiperOption:{
        initialSlide: 1,     //设置从第一张图片开始循环否则会从最后一开始
        loop: true,          // 设置图片循环
        autoplay: {
          delay: 3000,       //切换图片时间
          disableOnInteraction: false,  //设置操作swiper不会停止自动循环
        }, //设置可自动播放
  
        speed: 1000, //滑动速度
        pagination: {
            el: ".swiper-pagination",//分页器的类名
            clickable: true //设置分页小圆点可手动点击
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },   
   

效果图：