一个swiper 两个分页器的写法【总结】

原文地址：https://www.cnblogs.com/ling-nl/p/10935749.html

写项目的时候，使用的是swiper插件呈现的效果是一个swiper要实现两个分页器，下面就来总结一下

以swiper3为例来写，在页面中引入jquery、swiper.min.js和swiper.min.css文件。

HTML结构：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div class="banner swiper-container">   <div class="swiper-wrapper">       <div class="swiper-slide blue-slide">         slider1       </div>       <div class="swiper-slide red-slide">         slider2       </div>       <div class="swiper-slide orange-slide">         slider3       </div>   </div>   <!-- 如果需要分页器 -->   <div class="swiper-pagination"></div>   <!-- 自定义分页器 -->   <div class="swiper-num">     <span class="active"></span>/     <span class="total"></span>   </div>   <!-- 如果需要导航按钮 -->   <div class="swiper-button-prev"></div>   <div class="swiper-button-next"></div> </div>

 

.swiper-num这一块是需要自己定义的。
CSS样式：

 

1 2 3 4 5 6 7 8 9 10 11 12

.banner .swiper-pagination-bullets{bottom: 0;} .banner .swiper-pagination-bullets{bottom: 0;} .swiper-num {position: absolute;width: 165px;left:10%;bottom: 0;z-index: 2;} .swiper-num .active {display: inline-block;} .swiper-num span {font-size: 32px;} .swiper-num .total {display: inline-block;} .banner .swiper-slide{line-height: 500px;text-align: center;font-size: 50px;}   .blue-slide {background: #4390EE;color: #fff;} .red-slide {background: #CA4040;color: #fff} .orange-slide {background: #FF8604;color: #fff;} .gray-slide {background: gray;color: #fff;}

 

js代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var mySwiper = new Swiper ('.banner', {   loop: true, // 循环模式选项   // 如果需要分页器   pagination:  '.swiper-pagination',   // 如果需要前进后退按钮   nextButton: '.swiper-button-next',   prevButton: '.swiper-button-prev',   onInit: function(swiper){//Swiper初始化了     var total = "0"+swiper.bullets.length;     var active =swiper.activeIndex;     $(".swiper-num .active").text("0"+active);     $(".swiper-num .total").text(total); }, onSlideChangeEnd: function(swiper){     var active =swiper.realIndex +1;     $(".swiper-num .active").text("0"+active); }

 

onInit 回调函数，初始化后执行。
swiper.bullets.length：是获取分页器swiper的分页器个数长度。
activeIndex：当前swiper-slide的索引。
onSlideChangeEnd(swiper)：回调函数，swiper从一个slide过渡到另一个slide结束时执行。
swiper.realIndex：当前活动的swiper-slide的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。

以swiper4为例来写：
swiper4和swiper3的HTML结构一样，css样式也一样，使用的版本是swiper4.5
JS代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

var mySwiper = new Swiper ('.banner', {      loop: true, // 循环模式选项      loopedSlides:1,//如果是1的话不写也行      // 如果需要分页器      pagination: {        el: '.swiper-pagination',      },      // 如果需要前进后退按钮      navigation: {        nextEl: '.swiper-button-next',        prevEl: '.swiper-button-prev',      },             on:{        init:function(){          console.log(this);          var total=this.slides.length-2;          console.log(total);          $('.total').text('0'+total);          this.emit('transitionEnd');        },        transitionEnd:function(){          console.log(this.realIndex);          var index=this.realIndex+1;          $(".active").text("0"+index);        }      }    })

 

this.slides.length的长度为5，img的长度为3，所以减掉2，但是减去的前提是loopedSlides:1，的取值。
loopedSlides 在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
this.realIndex是从0开始的。所以要在此基础上加1。

每天学习一点点，让自己进步一点点。