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>