demo: （只是大概写了一下样式，重点在于"paginationBulletRender"里面的写法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<style>
body{padding:20px 10%;}
.mid{width:100%;height:120px;background: #fff;border-radius: 5px;float:left;text-align: center;line-height: 120px;}
.swiper_box .swiper-pagination{height:0px;}
.swiper_box .swiper-pagination-bullet{opacity:1;background: transparent;}
.swiper_box .swiper-pagination-bullet-active{background: transparent;}
.swiper_box .swiper-pagination-bullet-active .spanSame{border:3px solid #fff;}
.swiper_box .spanSame{width:30px;height:30px;display:inline-block;border-radius: 50%;color:#666;text-align: center;line-height: 30px;}
.swiper_box .span1{background: #7ebfde;margin-top:30px;}
.swiper_box .span2{background: #aac2f7;float:right;margin-top:60px;}
.swiper_box .span3{background: #f8b9e7;margin-top:90px;margin-left:45%;}
.swiper_box .span4{background: #9cdcda;margin-top:150px;float:left;}
.swiper_box .span5{background: #ece198;margin-top:140px;float:right;}
</style>
</head>
<body style="background: #d6d6d6;">
<!-- Swiper -->
<div class="swiper_box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="mid">Slide 1</div></div>
<div class="swiper-slide"><div class="mid">Slide 2</div></div>
<div class="swiper-slide"><div class="mid">Slide 3</div></div>
<div class="swiper-slide"><div class="mid">Slide 4</div></div>
<div class="swiper-slide"><div class="mid">Slide 5</div></div>
</div>
<!-- Add Pagination -->
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<script src="js/jquery.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '"><span class="spanSame span' + (index + 1) + '">' + (index + 1) + '</span></span>';
},
});
</script>
</body>
</html>