vue写轮播

vue轮播
css样式：
.my-swiper{
overflow: hidden;
width: 100%;
height: 50vw;
position: relative;
background: #dddddd;
}

.swiper-item{
    width: 50%;
    height: 50%;
    transition: all 1s;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    margin: auto;
    z-index: 0;
}
.swiper-item.active{
    opacity: 1;
    z-index: 9;
}

.swiper-item.prev{
    opacity: 0.8;
    transform: translateX(-100%) scale(0.8);
}
.swiper-item.next{
    opacity: 0.8;
    transform: translateX(100%) scale(0.8);
}

.swiper-item img{
    width: 100%;
    height: 100%;
}

模板语法：

<div class=“my-swiper” @click=“changeActive”>

方法： 下一张，上一张，当前张图片。