自定义el-carousel-item指示器样式
把指示器变成圆点
<style scoped>
/deep/.el-carousel__indicator--horizontal .el-carousel__button {
width: 15px;
height: 10px;
background: #f2f2f2;
border: 1px solid #ffffff;
border-radius: 50px;
opacity: 0.8;
border: none !important;
}
/deep/.el-carousel__indicator--horizontal.is-active .el-carousel__button {
width: 30px;
height: 10px;
background: #f59a23;
border-radius: 40px;
border: none !important;
opacity: 1;
}
/deep/.el-carousel__indicators--horizontal {
position: relative;
bottom: 32px;
left: 130%;
}
</style>
效果图:
文章来源:https://www.toymoban.com/news/detail-534463.html
文章来源地址https://www.toymoban.com/news/detail-534463.html
到了这里,关于自定义element-ui走马灯(轮播)样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!