如何再一个swiper里面做两个分页器

在一个swiper里面实现两个分页器，可以使用Swiper的pagination配置项和pagination.el选项。

具体实现方式如下：

1. 在HTML中，创建两个分页器容器，分别为"swiper-pagination1"和"swiper-pagination2"。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <!-- 第一个分页器 -->
  <div class="swiper-pagination1"></div>

  <!-- 第二个分页器 -->
  <div class="swiper-pagination2"></div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

2. 在JavaScript中，创建一个Swiper实例，并在pagination配置项中设置两个分页器，分别为".swiper-pagination1"和".swiper-pagination2"。同时，设置pagination.el选项为".swiper-pagination1"，表示Swiper会将第一个分页器作为默认分页器。

var mySwiper = new Swiper('.swiper-container', {
  // 其他配置项...
  pagination: {
    el: '.swiper-pagination1', // 默认分页器
    type: 'bullets', // 小圆点分页器
    bulletElement: 'span' // 小圆点的标签可以自定义，默认是li
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// 创建第二个分页器
var mySwiper2 = new Swiper('.swiper-container', {
  // 其他配置项...
  pagination: {
    el: '.swiper-pagination2', // 第二个分页器
    clickable: true, // 可点击切换当前slide
    renderBullet: function (index, className) {
      // 返回自定义的bullet元素
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// 通过监听事件，实现两个分页器的联动
mySwiper.on('slideChange', function () {
  var activeIndex = mySwiper.activeIndex;
  mySwiper2.slideTo(activeIndex, 300, false);
});

mySwiper2.on('click', function () {
  var activeIndex = mySwiper2.clickedIndex;
  mySwiper.slideTo(activeIndex, 300, false);
});

在上面的代码中，我们先创建了一个Swiper实例mySwiper，并将第一个分页器设置为默认分页器。然后，我们通过创建第二个Swiper实例mySwiper2，来创建第二个分页器。在第二个分页器中，我们设置了clickable为true，表示可以点击切换当前slide，并通过renderBullet函数来自定义分页器的内容。

在实现联动时，我们通过监听mySwiper的slideChange事件和mySwiper2的click事件，来实现两个分页器的联动。具体实现方式为：当mySwiper的slideChange事件被触发时，我们获取当前的activeIndex，并通过mySwiper2.slideTo方法来切换第二个分页器；当mySwiper2的click事件被触发时，我们获取点击的分页器索引，并通过mySwiper.slideTo方法来切换当前swiper的slide。

需要注意的是，在实现本方法时，需要确保两个分页器的容器位置、样式等保持一致，否则可能会出现样式错乱等问题。