Swiper4.x自定义分页器方法

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41869941/article/details/82258139
API地址：https://www.swiper.com.cn/api/pagination/70.html

HTML代码：

<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">swiper1</div>
<div class="swiper-slide">swiper2</div>
<div class="swiper-slide">swiper3</div>
<div class="swiper-slide">swiper4</div>
</div>
<div class="swiper-button-next swiper_next"></div>
<div class="swiper-button-prev swiper_prev"></div>
<div class="swiper-pagination">    
</div>

 

JS代码

<script>
var swiper1 = new Swiper('.swiper1', {
spaceBetween: 20,
slidesPerView: 2,
touchRatio: 0.2,
loop: true,
loopedSlides: 10, //looped slides should be the same
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
switch(index){
case 0:text='一';break;
case 1:text='二';break;
case 2:text='三';break;
case 3:text='四';break;
}
return '<span class="' + className + '">' + text + '</span>';
},
},
});    
</script>

 

 
————————————————
版权声明：本文为CSDN博主「FangYifei_」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41869941/article/details/82258139