swiper-pagination小圆点显示数量异常的问题（swiper.js）

swiper是一款非常好用的兼容pc+手机端的js插件，今天在使用swiper时发现一个bug：当一个页面存在多个swiper轮播时，swiper-pagination显示的数量不对。
 

bug还原

1、页面存在5个轮播
2、每个轮播调用方式一样
3、每个js都加了swiper-pagination，但只有第一个的html里有小圆点，其他轮播不需要小圆点

 

局部错误代码

var swiper = new Swiper ('.banner-swiper', {
    direction:'horizontal',
    loop: true,
    autoplay:3000,
    speed:1000,
    spaceBetween: 0,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable :true,
    autoplayDisableOnInteraction : false
});

var swiper = new Swiper ('.mainpro-swiper', {
    direction:'horizontal',
    loop: true,
    autoplay:3000,
    speed:1000,
    spaceBetween: 0,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable :true,
    autoplayDisableOnInteraction : false,
});

var swiper = new Swiper ('.faq-swiper', {
    direction:'horizontal',
    loop: true,
    autoplay:3000,
    speed:1000,
    spaceBetween: 0,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable :true,
    autoplayDisableOnInteraction : false,
});

var swiper = new Swiper ('.partner-swiper', {
    direction:'horizontal',
    loop: true,
    autoplay:3000,
    speed:1000,
    spaceBetween: 0,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable :true,
    autoplayDisableOnInteraction : false,
});

 

bug体现

在一个页面中使用两个以上swiper实例时，一个轮播，一个局部滚动，轮播图分页器数量异常，该数量等于第二个局部滚动内slide数量

 

解决方案

删除不需要pagination的js，也就是除了第一个外，删除以下代码

pagination: '.swiper-pagination',

 

网友其他方案

因为局部滚动不需要分页器，因此引入的时候<slider class="collection-slider" :sliderType="1" :index="index" :pagination='""'></slider>，pagination传入空字符串
 

if(this.sliderType === 0){
    this.banner = new Swiper(_slider,{
        slidesPerView: 1,
        pagination: self.pagination,
        autoplay: self.autoplay,
        onSlideChangeEnd: _onSlideChangeEnd,
        observeParents: true,
        observer: true,
        direction:'horizontal'

    })
  }
  else if(this.sliderType === 1){
      this.slider = new Swiper(_slider,{
          slidesPerView: 'auto',
          pagination: self.pagination,
          scrollbar: self.scrollbar,
      })
  }