elementui的轮播图

需求是需要把左右切换分页的大小于号放在轮播图外面：

涉及到了一些问题：

1.实现思路

2.绝对定位垂直居中

3.需要覆盖一些组件里的样式，直接给设置样式无法覆盖

解决1:实现思路

没有找到插件原生的方法，于是看了一遍文章，制作两个div装着图片，调整到所需位置，再给两个图片添加出发轮播图翻页的方法就可以。

文章地址：ElementUi Carousel 走马灯轮播图，el-carousel左右箭头位置调整_飞歌Fly的博客-CSDN博客_carousel 方向

解决2:绝对定位垂直居中

其中涉及到绝对定位垂直居中的问题解决方法如下：

position: absolute;

top: 50%;

transform: translate(0, -50%);

解决3：需要覆盖一些组件里的样式

在特定需要覆盖的样式后面添加 !import ，代码如下：

.carousel-button {

width: 64px;

height: 64px;

position: absolute;

top: 50%;

transform: translate(0, -50%);

z-index: 10;

.el-button {

width: 100%;

height: 100%;

font-size: 32px;

background-color: #e8e8e8;

color: white !important;

border: 0px !important;

}

}