修改element ui的走马灯指示器样式

最新推荐文章于 2023-12-05 14:31:11 发布

暴富的im

最新推荐文章于 2023-12-05 14:31:11 发布

阅读量956

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59626859/article/details/131013068

版权

前端专栏收录该内容

64 篇文章 0 订阅

订阅专栏

原生样式：

修改后的效果

代码如下：

  ::v-deep .el-carousel__indicators--horizontal {
        position: absolute;
        bottom: 5px;
        text-align: right;
        .el-carousel__indicator--horizontal button {
            width: 6px;    设置被选中前的样式
            height: 6px;
            background: #ffffff;
            border-radius: 50%;
            opacity: 0.5;
        }
 
        .el-carousel__indicator--horizontal.is-active button {
            width: 14px;      设置被选中后的样式
            height: 6px;
            background: #ffffff;
            opacity: 1;
            border-radius: 10px;
        }
    }