swiper4-vue 不使用loop,由最後一張跳到第一張

<template>    <div class="swiper-box">        <div class="swiper-container">            <div class="swiper-wrapper">                <div class="swiper-slide" v-for="(item, index)  in slides" :key="index">                    <img :src="item" :data-index="index">                </div>            </div>        </div>        <div class="swiper-add" id="add" @click="clickAdd">            <img src="../../assets/left/add.png">        </div>        <div class="swiper-text" >            <div>- 123 -</div>            <div>name<span></span><span>5星</span></div>        </div>    </div></template><script>    import Swiper from '../../../static/swiper.min.js';    import '../../../static/swiper.min.css';    export default {        props: {            slides: {                type: Array,            }        },        data() {            return {                mySwiper: {},                status: 1,            }        },                methods:{            initSwiper(){                this.mySwiper = new Swiper('.swiper-container', {//                    loop: true,//                    loopFillGroupWithBlank: true,//                    grabCursor: true,                    queueEndCallbacks: true,                    centeredSlides: true,//                    allowTouchMove: false, //不容許觸摸滑動                    slidesPerView: 3,//設置slider容器可以同時顯示的slides數量(carousel模式)。能夠設置爲數字（可爲小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量。loop模式下若是設置爲'auto'還須要設置另一個參數loopedSlides。                    slidesPerGroup: 1,//                    watchSlidesProgress : true,//                    watchSlidesVisibility : true,                    spaceBetween: 20,//                    slidesOffsetBefore: 100,//                    slidesOffsetAfter  : 300,                    initialSlide: 0,                    observer:true,                    observerParents:true,                });                this.$store.dispatch('getSwiperValue', this.mySwiper);                var self = this;                this.mySwiper.on('slideChangeTransitionEnd', function (swiper) { // 滑動以後執行                    var $img = document.querySelector('.swiper-slide-active > img');                    self.$store.dispatch('getSwiperIndex', $img.getAttribute('data-index')); // 獲得第幾張圖片                    console.log($img.getAttribute('data-index'), this.slides.length - 1);                    if(this.isEnd) { //最後一個                        self.status = 2 // 修改狀態                    }                });            },            //點擊下一張            clickAdd(){                if(this.status === 2){                    this.mySwiper.slideTo(0, 1000, false); // 回跳到第一個                    this.status = 1;                    this.$store.dispatch('getSwiperIndex', 0); // 修改值，第一張圖片                } else {                    this.mySwiper.slideNext();  // 下一張                }            },        },        mounted() {            this.initSwiper();        }    }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style lang="less">    .swiper-box {        position: relative;        width: 408px;        height: 248px;        background: url('../../assets/left/bg.png') no-repeat;        background-size: 100% auto;    }    .swiper-container {        width: 300px;        margin-left: 50px;    }    .swiper-slide {        text-align: center;        /* Center slide text vertically */        display: -webkit-box;        display: -ms-flexbox;        display: -webkit-flex;        display: flex;        -webkit-box-pack: center;        -ms-flex-pack: center;        -webkit-justify-content: center;        justify-content: center;        -webkit-box-align: center;        -ms-flex-align: center;        -webkit-align-items: center;        align-items: center;    }    .swiper-add {        position: absolute;        right: 12px;        top: 82px;    }    .swiper-add img {        width: 40px;        height: 42px;    }    .swiper-text {        color: #ffffff;        text-align: center;        line-height:32px;        position: absolute;        left: 50%;        top: 78%;        transform: translate(-50%, -50%);        -webkit-transform: translate(-50%, -50%);    }    .swiper-text div:last-child {        color: #43FFD2;        font-size: 18px;        vertical-align: middle;    }    .swiper-text span:first-child {        display: inline-block;        width: 23px;        height: 26px;        margin: 0 4px 0 12px;        vertical-align: middle;        background: url('../../assets/left/level.png') no-repeat;        background-size: 100% auto;    }    .swiper-text span:last-child {        font-size: 12px;        vertical-align: middle;    }    .swiper-wrapper {        padding-top: 44px;        height: 110px;    }      .swiper-slide img {        width: 80px;        height: 80px;    }    .swiper-slide-active img {        width: 110px;        height: 110px;    }</style>