一個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。

每天學習一點點，讓自己進步一點點。