【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">

<li
v-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
}