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

Question

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

Answer 1

加点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;
}