1.属性中定义需要控制切换的carousel名称: ref="carousel"
2.通过change事件监听轮播index发生改变。
(change事件获取两个参数,前一张的index值和后一张index的值)
//template
<div class="carouselBox">
<el-carousel ref="carousel" @change="carouselChange">
<el-carousel-item v-for="item in 3" :key="item">
{{ item }}
</el-carousel-item>
</el-carousel>
<div class="prev" @click="prev"></div>
<div class="next" @click="next"></div>
</div>
data(){
return{
autoplay: false,
carouselIndex: 0
}
}
通过next() prev() 方法切换当前轮播
//methods
carouselChange(index){
this.carouselIndex = index;
},
prev() {
this.$refs.carousel.prev();
},
next(){
console.log(this.$refs.carousel);
this.$refs.carousel.next();
}
网友评论