微客导航 » 文章资讯 » swiper自定义分页器的样式

swiper自定义分页器的样式

2023-07-16 19:02:03 331

本文实例为大家分享了swiper自定义分页器的样式代码，供大家参考，具体内容如下

js主要代码

pagination:{
//自定义分页器的类名----必填项
el:'.custom-pagination',

//是否可点击----必填项
clickable:true,

//分页的类型是自定义的----必填项
type:'custom',

//自定义特殊类型分页器，当分页器类型设置为自定义时可用。
renderCustom:function(swiper,current,total){

console.log(current);//1234
}
},

一、el

分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。

二、分页器样式类型可选

‘bullets'圆点（默认）
‘fraction'分式
‘progressbar'进度条
‘custom'自定义

三、renderCustom()

自定义特殊类型分页器，当分页器类型设置为自定义时可用。

四、slideToLoop()

在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex

源码







Document



















首页


网站


关于


联系

1

2

3

4

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

swiper自定义分页器的样式

1

2

3

4

热门推荐

随机推荐