el-carousel 走马灯指示器样式修改成小圆点

最新推荐文章于 2025-03-26 15:28:30 发布

小金学渗透

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量2k

点赞数 34

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_62283559/article/details/145323979

版权

参考官网：组件 | Element

参考文章：Vue ElementUI el-carousel 走马灯指示灯样式修改_el-carousel 指示器样式-CSDN博客

前言：

在完善毕设的页面设计时注意到页面轮播图使用了el-carousel 走马灯，默认使用时指示器为长横行条，当容器比较小时这样的显示会占据在页面中堆积，不够美观，所以打算做一下修改，将走马灯轮播图下方的指示器图标修改为小圆点并靠右，这样可以规避这个问题。

效果展示：

修改前后对比如下所示：

走马灯学习：

使用：在有限空间内，循环播放同一类型的图片、文字等内容。通常用于轮播图的使用。

修改参数里面几个比较重要的参数则可以改变走马灯样式：

①trigger属性

走马灯的trigger属性默认为hover,在这个设置下用户将鼠标移动到指示器时会自动切换页面图片，通过设置trigger属性为click，可以达到点击触发的效果，即用户点击该指示器才可触发页面切换。

②indicator-position属性

indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。

③arrow属性

arrow属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将arrow设置为always，则会一直显示；设置为never，则会一直隐藏。

④direction 属性

默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。

修改过程：

1、走马灯代码

使用使用el-carousel和el-carousel-item标签就得到了一个走马灯。

<div>
    <el-carousel height="300px" style="border-radius: 10px">
        <el-carousel-item v-for="item in carousel_top">
            <img :src="item" alt="" style="width: 100%;height:300px;border-radius: 10px">
        </el-carousel-item>
    </el-carousel>
</div>

2、css修改

将默认样式修改为小圆点显示主要就是在css上做修改。

说明：

使用关键字 /deep/，表示改变 element-ui 组件深层次样式

使用关键字 unset，表示重置；

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
/*指示器*/
/deep/ .el-carousel__indicators {
left: unset;
  transform: unset;
  right: 2%;
}
 /*指示器按钮*/
/deep/ .el-carousel__button {
width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
/*指示器激活按钮*/
/deep/ .is-active .el-carousel__button {
  background: #f7c173;
}

/deep/ .el-carousel__container {
  height: 100%;
}