swiper 自定义pagination 样式内容

<!-- 如果需要分页器 -->
<div class="swiper-pagination">
<ul class="pagination">
</ul>
</div>
适用于swiper 4.x
<script>
var mySwiper = new Swiper ('.swiper-container', {
// 如果需要前进后退按钮
pagination: {//分页容器的css选择器
el:'.pagination',
clickable:true,
renderBullet:function (index, className) {
var text = '';
switch (index){
case 0:
text = '******';
break;
case 1:
text = '******';
break;
case 2:
text = '*****';
break;
case 3:
text = '*****';
break;
case 4:
text = '*****';
break;
case 5:
text = '****';
break;
case 6:
text = '****';
break;
}
return '<li class="'+className+'">' + text + '</li>'
}
},
});
</script>

猜你喜欢

转载自www.cnblogs.com/zhpblog/p/9335382.html
今日推荐