修改element ui 的走马灯swiper的样式

1,160 阅读1分钟

指示点变圆点

效果

image.png 样式

/横向swiper样式修改 控制指示点
::v-deep.row-swiper {
  .el-carousel.el-carousel--horizontal {
    overflow: visible;
    position: relative;
  }
  //点的ul
  .el-carousel__indicators.el-carousel__indicators--horizontal {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    top: -70px;
    right:-50%
    //z-index: 9999;
    li {
      margin: 0px 5px;
      padding: 0;
    }
    .el-carousel__button {
      background: #606266;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
  }
}
//纵向swiper样式修改
::v-deep.alert-group {
  .el-card__header {
    background: #fff;
    z-index: 9999;
    position: relative;
  }
}
::v-deep.right-swiper {
  //ul
  .el-carousel.el-carousel--vertical {
    overflow: visible;
  }
  //点的ul
  .el-carousel__indicators.el-carousel__indicators--vertical {
    width: 200px;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    top: -50px;
    z-index: 9999;
    li {
      margin: 0px 5px;
      padding: 0;
    }
    .el-carousel__button {
      background: #606266;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
  }
}