寫項目的時候，使用的是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。
每天學習一點點，讓自己進步一點點。
?
?
