内容区域:加一个ref=“varousel”,任意取

 	 <a-carousel class="varousel" ref="varousel">
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
        </a-carousel>

按钮区域:在每个按钮加上点击事件

<div class="btn-box">
           <div class="title">小车路径</div>
           <input @click="goTo(1)" type="button" value="车1" />
           <input @click="next()" type="button" value="车2" />
           <input @click="prev()" type="button" value="车3" />
           <input @click="goTo(4)" type="button" value="车4" />
       </div>

定义goTo方法:varousel跟上面ref的值保持一致

goTo(index){
     this.$refs.varousel.goTo(index-1);
 }

定义next方法:

next(){
	this.$ref.varousel.next();
}

定义prev方法:

prev(){
	this.$ref.varousel.prev();
}
Logo

前往低代码交流专区

更多推荐