怎样一个swiper实例同时显示两种分页器

609449489

有个需求是显示progress模式的分页器（页面顶部）的基础上 同时显示fraction模式的分页器（页面底部）
移动端、H5自适应全屏页
该如何做呢

admin

要自定义

菜鸟龙小仙

首先，调用官方的分页器属性，使用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:28
首先，调用官方的分页器属性，使用fraction模式；
底部自己添加个分页器2。

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