SOURCE

var mySwiper = new Swiper('.swiper-container',{
	pagination: '.my-pagination-ul', //自定义分页器名字
	paginationClickable: true, //true时，点击分页器的指示点分页器会控制Swiper切换
	paginationBulletRender: function (index, className) {
		switch (index) {
		  case 0: name='热卖';break;
		  case 1: name='水果';break;
		  case 2: name='乳品';break;
		  case 3: name='零食';break;
		  default: name='';
		}
	    return '<li class="' + className + '">' + name + '</li>';
	  }
})

<div class="swiper-container">
	<div class="my-pagination"><ul class="my-pagination-ul"></ul></div>
	<div class="swiper-wrapper">
		<div class="swiper-slide">1</div>
		<div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
	</div>
</div>
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.css" />
<script src="https://cdn.bootcss.com/Swiper/3.0.8/js/swiper.min.js"></script>

*{margin:0; padding:0;}
body{background: #f2f2f2;}
*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);} /* 取消链接高亮 */
.my-pagination .swiper-pagination-bullet {text-align: center;border-radius: 0;opacity: 1;}
.my-pagination ul { display: -webkit-box; }
.my-pagination li { display: block; background: #fff; overflow: hidden; box-flex: 1; -moz-box-flex: 1; -webkit-box-flex: 1; height: 40px; line-height: 40px; position: relative; font-size: 15px; }
.my-pagination li:after { position: absolute; top: auto; right: auto; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: 1px; content: ''; background-color: #dcdcdc; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(.5) }
.my-pagination .swiper-pagination-bullet-active { color: #21a4f4; }
.my-pagination .swiper-pagination-bullet-active:after { opacity: 1; background-color: #21a4f4; height: 4px; }