修改Swiper的分页器样式

 

 // 分页器
          pagination: {
            el: ".swiper-pagination",
            // clickable设置为true时，点击分页器的指示点分页器会控制Swiper切换
            clickable :true,
            //修改分页器样式
            bulletClass : 'swiper-pagination-bullet',
            //激活样式
            bulletActiveClass: 'my-bullet-active',
          },

在本页面中写样式：（必须不能是less等，，否则读取不到，而bulletClass : 'swiper-pagination-bullet',，必须使用swiper-pagination-bullet来写样式，其它的话需要全新的去设计样式，）

 

 

<!--自定义分页器样式-->
 <style type="text/css"> 
.my-bullet-active{ 
    background: #ffffff; 
    opacity: 1; 
} 
.swiper-pagination-bullet{ 
    width: 20px;
     height: 20px;
     background: #b3e9cf; 
} 
</style>

效果