elementUI走马灯添加小标题同步切换

1、页面部分采用elementUI的官方走马灯控件

<div id="app">
    <template v-for="(item,index) in carouseData">
      <span @mouseover="handChange(index)" :class="carouseId == item.id ? 'span1' : 'span'">{{item.title}}</span>
    </template>

    <template>
      <el-carousel @change="handChange" :interval="4000" type="card" ref="carousel">
        <el-carousel-item v-for="item in carouseData" :key="item.id">
          <h3>{{ item.id }}</h3>
          <img alt="" :src="item.url" @click="">
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>

2、js部分添加添加数据以及对应下标参数

var vm = new Vue({
	el:"#app",
	data(){
		return:{
			carouseId:0,
			carouseData:[
			{url:'/static/img/img_bg.d820fbbb.png',title:'标题1',id:0},
            {url:'/static/img/img_bg.d820fbbb.png',title:'标题2',id:1},
            {url:'/static/img/img_bg.d820fbbb.png',title:'标题3',id:2}
		}
	},
	methods:function(){
		//走马灯自动改变触发事件
      handChange(index){
        this.$refs.carousel.setActiveItem(index);
        this.carouseId=index
      },
	}
});

3、css部分添加切换标签的样式

.span1{
  color: #2f87f1;
}
.span2{
  color: #0070c0ad !important;
}

3、最终效果，页面比较粗糙，凑活看吧，但是功能是好的