如何使用ElementUI中的走马灯（carousel）组件实际滚动条自身的进度条效果？

目前希望在Vue框架中使用ElementUI的走马灯组件实现首页Banner的轮播效果。同时希望能做出https://developer.amap.com/ 这个网站那样，下面的滚动条有进度条效果（即根据自动轮播的时间间隔长度走进度条），到达间隔时间就跳下一个。目前不知入何下手，还是只能自制？

加点css就可以实现，注意css的权重问题，还有过渡时间安排

https://codepen.io/hf872914334/pen/eYgGmLz

.el-carousel__button{
  position: relative;
  overflow: hidden;
  opacity: 1;
  background-color: #ddd;
}
.el-carousel__button::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height:100%;
  top:0;
  left:-100%;
  background: #f00;
}
.is-active .el-carousel__button::after{
  transition: left 2s;
  left: 0;
}

你要准备几张图片，把文件几路径放到一个数组里面，轮播控件绑定数组名称就可以了

需要将轮播组件和进度条组件再次封装一下，然后自己去实现进度条时间效果。

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632