swiper修改轮播图下面小圆圈样式

具体样式

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    width: .18rem;
    height: .08rem;
    border-radius: 0;
}
.swiper-pagination-bullet-active{
    background: #4BDAD3;
    width: .34rem !important;
}

这两个class都是swiper里面的

border-radius: 0;是去除圆圈样式，我是做长方形的

width: .34rem !important; 选中时候可以改变长度  一定要加!important

 

菜鸟继续赶路   做个笔记