hsbraver 2021-04-07 11:36 采纳率: 0%
浏览 1428
已结题

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

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

  • 写回答

4条回答 默认 最新

  • hfhan_872914334 2021-04-07 14:36
    关注

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

    评论

报告相同问题?