一、原始样式
二、修改后
三、代码
<template>
<div>
<el-carousel height="250px" >
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style lang="stylus" scoped>
.el-carousel {
width: 500px;
.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: #3f8ec8;
}
}
</style>
知识点:
- 代码第 20 - 34 行,为指示器 css 设置
- 代码第 20、25、32 行,使用关键字 /deep/,表示改变 element-ui 组件深层次样式;
- 代码第 21、22 行,使用关键字 unset,表示重置;