Swiper中文论坛

标题: 怎样一个swiper实例同时显示两种分页器 [打印本页]

---

作者: 609449489    时间: 2017-7-7 15:51
标题: 怎样一个swiper实例同时显示两种分页器
有个需求是显示progress模式的分页器（页面顶部）的基础上 同时显示fraction模式的分页器（页面底部）
移动端、H5自适应全屏页
该如何做呢

---

作者: admin    时间: 2017-7-12 10:05
要自定义

---

作者: 菜鸟龙小仙    时间: 2017-7-18 16:28
首先，调用官方的分页器属性，使用fraction模式；
底部自己添加个分页器2。

1. <div class="swiper-pagination"></div>

复制代码

具体的定位函数自己定义。
然后使用回调函数onInit和onSlideChangeStart。

1. onInit: function(swiper){
   
2.       //Swiper初始化获取slide的个数
   
3.       var len=mySwiper.slides.length;
   
4.       for (var i=0;i<len;i++){
   
5.           $('.swiper-pagination2').apped(<span class="pa-item"><span>)
   
6. }//遍历生成视图点
   
7.   $('.pa-item').eq(0).addClass('.pa-item-active');//初始化时给第一个试图点加上选择类
   
8. }

复制代码

1. onSlideChangeStart:function(swiper){
   
2.       var idx=swiper.activeIndex;//获取到当前slide的索引值；
   
3. $('.pa-item').eq(idx).addClass('.pa-item-active').siblings().removeClass('.pa-item-active');
   
4. }

复制代码

---

作者: 菜鸟龙小仙    时间: 2017-7-18 16:30

菜鸟龙小仙 发表于 2017-7-18 16:28
首先，调用官方的分页器属性，使用fraction模式；
底部自己添加个分页器2。

第二段文字有个词手快打错了，“定位函数”更改为“定位样式”。

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2