Swiper 自定义分页器

/*包裹自定义分页器的div的位置等CSS样式*/
.swiper-pagination-custom {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/*自定义分页器的样式，这个你自己想要什么样子自己写*/
.swiper-pagination-customs {
  width: 30px;
  height: 4px;
  display: inline-block;
  background: #000;
  opacity: 0.3;
  margin: 0 5px;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
  opacity: 1;
  background-color: #f78e00;
}

var swiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
  },

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    type: "custom", //自定义分页器
    renderCustom: function (swiper, current, total) {
      var paginationHtml = " ";
      for (var i = 0; i < total; i++) {
        // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
        if (i === current - 1) {
          paginationHtml +=
            '<span class="swiper-pagination-customs swiper-pagination-customs-active" ></span>';
        } else {
          paginationHtml += '<span class="swiper-pagination-customs" ></span>';
        }
      }
      return paginationHtml;
    },
  },
});