1.template
<swiper :options="swiperOption" ref="mySwiper" v-if='slides.length'>
<swiper-slide v-for="(slide, i) in slides" :index="i" :key="i" >
<div class="imageDisplay">
<img :src="slide.src" v-if='i==i'>
</div>
</swiper-slide>
</swiper>
2.script
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
swiperOption: {
init:false,
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay:{
delay:1500,
disableOnInteraction: false,
autoplayDisableOnInteraction: false,
},
loop:true,
loopAdditionalSlides: 5,
spaceBetween: 200,
coverflowEffect: {
rotate: 0,
stretch: 10,
depth: 60,
modifier: 4.7,
slideShadows : false
},
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
updated() {
if (this.slides.length>1) {
this.swiper.init();
}
},