Vue中Swiper循环轮播的设置

简单描述

swiper轮播图，轮播完默认显示最后一张问题，做到重复轮播

看效果

配置

1、配置：loop:true

data() {
    return {
      swiperList :[],
      swiperOption: {
        autoplay: {
          disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
          delay: 3000, // 自动切换的时间间隔（单位ms）
        },
        loop: true, 
        initialSlide: 0,
        pagination: { el: '.swiper-pagination' }, // 分页按钮
        paginationClickable: true,
        onSlideChangeEnd: swiper => {
          //console.log('onSlideChangeEnd', swiper.realIndex)
        }
      }
    }
  },

2、配置：v-if="swiperList.length"

！！！注意swiperList是数据名称
看用法：

<section class="my-swiper">
	<swiper :options="swiperOption" v-if="swiperList.length">
        <swiper-slide  class="my-swp-silde" v-for="(slide, key) in swiperList" :key="key" data-id="slide.id">
            <img class="my-swp-img" :src="slide.img" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</section>