element手动点击修改走马灯的播放索引

背景：

项目中需求改成上方展示小区列表，下方是各校区数据的柱状图轮播，轮播到该校区时上方校区高亮。但是点击某一个校区也要展示该校区对应的柱状图，这里就用到了手动修改走马灯的播放索引。

思路：

element官方提供了setActiveItem方法，调用此方法可以改变当前播放的幻灯片。使用方法如下：

<div class="bottom-box-right">
  <div class="campusDisplay">
    <span v-for="(val, key, i) in campusBuildingData" :key="i" :class="{'campus-active':current===i}" @click="changeCampusIndex(i)">{{key}}</span>
  </div>
  <el-carousel trigger="click" :interval='5000' arrow="never" @change="changeCampus" ref="remarkCarusel">
    <el-carousel-item v-for="(val, key, i) in campusBuildingData" :key="i">
      <Bar3D :id="'bottom-box-right-bar3d'+i" width="350px" height="300px" :campusData="val"></Bar3D>
    </el-carousel-item>
  </el-carousel>
</div>

changeCampus (val) {
 this.current = val
},
changeCampusIndex (index) {
  this.$refs.remarkCarusel.setActiveItem(index)
}

上方代码校区列表和走马灯通过current关联，重点在于ref和setActiveItem方法。

效果如下：

点击望江校区已经可以切换到对应的幻灯片。不点击时幻灯片自动播放。