// 分页器
pagination: {
el: ".swiper-pagination2",
// clickable设置为true时,点击分页器的指示点分页器会控制Swiper切换
clickable :true,
//修改分页器样式 ,
bulletClass : 'my-swiper-pagination-bullet',
//激活样式
bulletActiveClass: 'my-bullet-active',
},
<style type="text/css">
.my-bullet-active{
background: #ffffff;
background: rgba(255,255,255,.5)!important;
/*opacity: 0.6;*/
}
.my-swiper-pagination-bullet{
width: 20px;
height: 20px;
display: inline-block;
border-radius: 100%;
background: rgba(255,255,255,.1);
margin-bottom: 30px!important;
margin-right: 10px!important;
margin-left: 10px !important;
}
</style>
说明:这段代码必须放在单独一个css文件里面,或者无scoped的sytle标签中
因为使用my-swiper-pagination-bullet替代swiper-pagination-bullet,所以有些样式是必须的
display: inline-block; border-radius: 100%;
因为swiper源码中使用opacity的来显示颜色
我就使用background: rgba(255,255,255,.5)!important;替代,而且不加!importan会无效