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

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

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

HTML结构：

 

  <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样式：

 

   .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代码：

 

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代码：

 

 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。

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