【vue+css】实现叠层轮播图切换组件

halo，小伙伴们，当我们需要开发一个自定义样式的叠层轮播图切换组件，在Ant Design或elementUI都没有满意的，我们是不是会考虑自己写一个，如下图所示的：

笔者这次带来的支持左右切换循环切换、自动切换，话不多说，上代码：
新建一个页面文件为carouselImg.vue，编写如下：

<template><div class="carousel" ref="carousel"><div class="whole"><div class="roll-img"><span class="last" @click="after" v-show="showIndex"><a-icon type="left" /></span><!-- 图片容器 --><ul id="ul">
<!--          v-on:click="change($event)"--><liv-for="(item, index) in bannerImgList":key="index":class="classes[index]">
<!--            {{index}}--><img :src="item.alarmPicData" alt="" /></li></ul><span class="next" @click="before" v-show="showIndex"><a-icon type="right" /></span></div></div></div>
</template><script>
export default {props:{bannerImgList:{type:Array},autoPlay:{default: false}