用swiper做轮播图,里面有两个分页器,其中一个分页器用小圆点表示,另外一个分页器用图片来显示

可以使用swiper的pagination配置项，它可以配置分页器的样式和位置。

对于小圆点的分页器，可以配置pagination.type为"bullets"；对于使用图片的分页器，可以通过设置pagination.renderBullet函数来自定义分页器的内容。具体代码示例如下：

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

var mySwiper2 = new Swiper('.swiper-container2', {
  // 其他配置项...
  pagination: {
    el: '.swiper-pagination2',
    type: 'custom', // 自定义分页器
    renderBullet: function (index, className) {
      // 根据index生成对应的图片地址
      var imgUrl = 'images/bullet-' + (index + 1) + '.png';
      // 返回自定义的bullet元素
      return '<span class="' + className + '"><img src="' + imgUrl + '"></span>';
    }
  },
  navigation: {
    nextEl: '.swiper-button-next2',
    prevEl: '.swiper-button-prev2',
  },
});

在上面的代码中，我们新增了一个名为"swiper-container2"的swiper，使用了自定义的分页器。在自定义分页器中，我们通过renderBullet函数来生成分页器的内容。对于每个分页器，我们都需要在HTML中添加对应的分页器容器：

<!-- 小圆点分页器 -->
<div class="swiper-pagination"></div>

<!-- 自定义分页器 -->
<div class="swiper-pagination2"></div>

同时，我们需要在CSS中定义分页器元素的样式，例如：

.swiper-pagination2 span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.swiper-pagination2 img {
  width: 100%;
  height: 100%;
}

以上示例代码中，我们假设了图片的命名规则为"bullet-1.png"、"bullet-2.png"等，这些图片放在了"images"目录下。如果你的图片命名规则不同，需要根据实际情况修改renderBullet函数中的代码。