原

修改element plus Carousel 走马灯改指示器的样式，变为小圆点的效果。修改切换箭头的样式，位置，颜色等

27人阅读 2024/12/23 16:34 总访问：744330 评论：0 收藏：0 手机

分类: 前端

代码如下：
```

<style scoped="scoped" lang="scss">

	/*
	   修改element plus Carousel 走马灯 改指示器的样式，变为小圆点的效果
	 */
	::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
		width: 7px;
		height: 7px;
		background: #ebe6e6;
		border-radius: 50%;
		opacity: 1;
	}
	::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
		width: 7px;
		height: 7px;
		background: #1880ff;
		border-radius: 50%;
		opacity: 1;
	}


	/*
	  修改element plus Carousel 走马灯 切换箭头样式，位置，颜色等
	 */

	//调整走马灯箭头-左箭头
	::v-deep .el-carousel__arrow--left {
		// top: 160px;
		// left: -13px;
		// 微调一下位置
		margin-top: -33px;
		font-size: 15px;
		opacity: 0.8;

		background: #18a6ff;
		// color: #02e9ff;
	}

	//右箭头
	::v-deep .el-carousel__arrow--right {
		// top: 70px;
		// right: -13px;
		// 微调一下位置
		margin-top: -33px;
		font-size: 15px;
		opacity: 0.8;

		background: #18a6ff;
		// color: #02e9ff;
	}
</style>
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 78篇

随笔 15篇

移动开发 6篇

数据库 8篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

修改element plus Carousel 走马灯改指示器的样式，变为小圆点的效果。修改切换箭头的样式，位置，颜色等

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

修改element plus Carousel 走马灯 改指示器的样式，变为小圆点的效果。修改切换箭头的样式，位置，颜色等

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

修改element plus Carousel 走马灯改指示器的样式，变为小圆点的效果。修改切换箭头的样式，位置，颜色等