通过手写按钮控制el-carousel轮播翻页

第一步

创建两个按钮

第二步

书写按钮选中和未选中状态的类名以及css样式

第三步

给el-carousel添加ref属性用来获取这个节点---carousel

第四步

给两个按钮添加点击事件，同时通过事件的参数传递当前按钮的标识，要和轮播组件的索引值相对应---@click=changeHandle(index)

第五步

通过this.$refs获取到轮播节点，再通过这个轮播组件自带的设置索引的方法改变轮播索引值，此时点击按钮已经可以控制轮播翻页

changeHandle(index){    this.$refs.carousel.setActiveItem（index） }

第六步

随着翻页操作改变按钮的选中样式

定义一个变量curIndex，通过组件自带的改变事件(@change=swiperChange)，将当前索引值赋值给这个变量，按钮通过变量值来控制按钮自身的类名，从而控制选中样式

swiperChange(num){ this.curIndex=num }

第七步

选中和未选中的类名分别为select ， unselect

去通过改变类名的方法控制样式，书写格式如下:

:class={"select":curIndex == 当前按钮的索引，"unselect":curIndex !== 当前按钮索引}