修改swiper分页样式

时间:2019-12-23 11:04:07 类型:CSS
字号:    

swiper是一个很好用的幻灯插件,不过有时也我们也会修改分页的样式,那该如何修改呢?

其实只要在加载swiper.min.css样式的下边增加覆盖默认的分页样式就可以了

<style type="text/css">
	.swiper-container .swiper-pagination .swiper-pagination-bullet {
	    width: 20px;
	    height: 20px;
	    display: inline-block;
	    border-radius: 100%;
	    background: #000;
	    /* opacity: .2; */
	}
	.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
	    width: 46px;
	    height: 20px;
	    display: inline-block;
	    border-radius: 20px;
	    background: #fff;
	    /* opacity: .2; */
	}
</style>