swiper vue 手机端轮播图 切换数据，图片重复的问题，刷新不能重复轮播的问题，手动控制翻页，点击翻页以后停止轮播

1，切换轮播图的数组以后，图片重复的问题

因为一个容器两套数组swiper插件loop只复制第一个数组第一张和最后一张图， 切换第二个数组不会重新复制图片还是上个数组的值,所以只能手动替换第一张和最后一张

  <div style="height: 100%;display: flex; align-items: center;">
    <swiper class="my_swiper" v-if="swiperState" ref="mySwiper" :options="swiperOption" >
      <swiper-slide v-for="(item, index) in banners" :key="item" data-jumpUrl="item">
        <img :src="item" alt="" :data-path="item" data-yaya="图片" @click="imgClcik(item, index)">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="prev"  @click.stop="prevBtn"></div>
    <div class="next"  @click.stop="nextBtn"></div>
  </div>

解决办法：监听轮播图的数组并且手动替换

  watch: {
    banners(n){
      // 因为一个容器两套数组swiper插件loop只复制第一个数组第一张和最后一张图， 切换第二个数组不会重新复制图片还是上个数组的值,所以只能手动替换第一张和最后一张
      setTimeout(() => {
        document.querySelectorAll('.swiper-slide-duplicate')[1].children[0].src=n[0]
        document.querySelectorAll('.swiper-slide-duplicate')[0].children[0].src=n[n.length-1]
      }, 100)
    }
  },

2，刷新不自动轮播的问题

解决办法：延迟操作

  data () {
    return {
      swiperState: false,
      // Swiper 配置项
      swiperOption: {
        direction: 'horizontal', // Swiper的滑动方向,可设置为水平方向切换 horizontal（默认） 或垂直方向切换 vertical
        slidesPerView: 1, // Swiper的列数
        // spaceBetween: 30, //板块间距
        // 设置分页器
        pagination: {
          el: ".swiper-pagination",
          type: 'bullets',//将分页的类型改为圆点（默认)
          clickable: true,// 点击可切换
          // hideOnClick :true, // 点击swiper-slide显隐
        },
        // 设置自动轮播
        autoplay: {
          delay: 1000, // 1秒切换一次
          disableOnInteraction: true, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        preventClicksPropagation: true,
        loop: true, //无缝轮播
        grabCursor: true, // 覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状
      },
    };
  }, 
 mounted () {
    setTimeout(() => {
      this.swiperState = true // 解决刷新不能重新自动轮播
    }, 100)
  },

3，自定义按钮左右翻页，点击翻页以后停止轮播

 prevBtn () {
      this.$refs.mySwiper.swiper.slidePrev();
      this.$refs.mySwiper.swiper.autoplay.stop();
    
    },
    nextBtn () {
      this.$refs.mySwiper.swiper.slideNext();
      this.$refs.mySwiper.swiper.autoplay.stop();
    },

附加一下轮播图的样式

<style scoped>
.prev {
  width: 55px;
  height: 80px;
  background-image: url(../../../assets/img/menu/left.png);
  background-size: 100% 100%;
  z-index: 99;
  position: absolute;
  left: -10px;
}
.next {
  width: 55px;
  height: 80px;
  background-image: url(../../../assets/img/menu/right.png);
  background-size: 100% 100%;
  z-index: 99;
  position: absolute;
  right: -10px;
}

.my_swiper {
  /* width: 100%; */
  width: 580px;
  height: 100%;
}
.swiper-slide {
  height: 100%;
  width: 100%;
  /*background: #007aff;*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*overflow: hidden;*/
}

.my_swiper img {
  display: block;
  width: 580px;
  height: auto;
  /*height: 100%;*/
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
  top: 15px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 设置小圆点样式 */
.my_swiper /deep/ .swiper-pagination-bullet {
  opacity: 1;
  width: 9px;
  height: 9px;
  background: linear-gradient(0deg, #E6CEA8, #ECD6B0);
  border: 1px solid #FFFFFF;
  box-shadow: 0px 9px 13px 0px rgba(6, 3, 0, 0.83);
  border-radius: 50%;
}

/* 设置小圆点激活样式 */
.my_swiper /deep/ .swiper-pagination-bullet-active {
  background: linear-gradient(0deg, #8C2B29, #CF5856);
  border: 1px solid #FFF3C9;
  box-shadow: 0px 9px 13px 0px rgba(6, 3, 0, 0.83);
  width: 11px;
  height: 11px;
}
</style>