Swiper.js：同时显示进度条和分页数字的定制化方案

<div class="swiper mySwiper">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<script>
  var swiper = new Swiper('.mySwiper', {
    keyboard: {
      enabled: true,
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'custom',
      renderCustom: function (swiper, current, total) {
        // 渲染进度条
        var progressBarHtml = '<div class="progressbar"><div class="progressbar-fill" style="width:' + (current / total) * 100 + '%"></div></div>';

        // 渲染分页数字
        var paginationHtml = '';
        for (var i = 0; i < total; i++) {
          var className = 'swiper-pagination-bullet';
          if (i === current - 1) {
            className += ' swiper-pagination-bullet-active';
          }
          paginationHtml += '<span class="' + className + '">' + (i + 1) + '</span>';
        }

        // 组合进度条和分页数字
        return progressBarHtml + paginationHtml;
      }
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    mousewheel: {
      releaseOnEdges: true,
    },
  });
</script>

<style>
  .progressbar {
    width: 100%;
    height: 5px;
    background-color: #eee;
    margin-bottom: 5px;
  }

  .progressbar-fill {
    height: 100%;
    background-color: #337ab7;
    width: 0; /* 初始宽度设置为0，后续通过JS动态设置 */
  }

  .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    background-color: #ccc;
    text-align: center;
    line-height: 20px;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
  }

  .swiper-pagination-bullet-active {
    background-color: #337ab7;
  }
</style>