Carousel 走马灯

一、原始样式?

二、修改后

三、代码 <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，表示重置；

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。