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

涉及到了一些问题:

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;

}

}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐