vue实现轮播图效果

<div class="banner">
        <span  @click="slidePre"  class="slide-pre">
            <i class="fa fa-chevron-left fa-2x fa-fw icon-chevron-left"></i>
        </span>
        <span @click="slideNext" class="slide-next">
            <i class="fa fa-chevron-right fa-2x fa-fw icon-chevron-right"></i>
        </span>
        <div class="slide" transition="fadeIn" v-show="$index === curpage"
            v-for="item in banners" :key="item.id">
            <a :href="item.sourceUrl" target="_blank">
                <img :src="item.imgUrl" alt="" />
            </a>
        </div>
    </div>

data () {
        return {
            prevTid: '',
            curpage: 0,
            slideDirection: 1
        }
    },

methods: {
        slideNext () {
            const lastPage = this.banners.length - 1
            if (this.curpage < lastPage) {
                this.curpage += 1
            } else {
                this.curpage = 0
            }
        },
        slidePre () {
            const lastPage = this.banners.length - 1
            if (this.curpage > 0) {
                this.curpage -= 1
            } else {
                this.curpage = lastPage
            }
        },
        autoSlide () {
            clearInterval(this.prevTid)
            this.prevTid = setInterval(() => {
                this.slideNext()
            }, 5000)
        }
    }
这里就简单写一下，并不完整，主要是学习这种思路，面向对象的方法，感觉很好用呀。
同样也是来自：https://github.com/wendaosanshou/mi-by-vue