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

Posted 2021-12-09 ling-nl

写项目的时候，使用的是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。

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