Swiper.js：同时显示进度条和分页数字的终极指南-js教程-PHP中文网

Swiper.js：同时显示进度条和分页数字的终极指南

花韻仙語

发布： 2025-08-01 19:24:10

原创

163人浏览过

swiper.js：同时显示进度条和分页数字的终极指南

本文旨在帮助开发者在使用 Swiper.js 轮播图组件时，同时展示进度条和分页数字。通过自定义分页渲染函数，我们可以将进度条和分页数字整合到一起，提供更丰富的用户体验。本文将提供详细的代码示例和步骤，助你轻松实现这一功能。

在使用 Swiper.js 创建轮播图时，我们经常需要展示分页信息，以便用户了解当前轮播进度。Swiper.js 提供了多种分页类型，如数字分页和进度条分页。然而，有时我们需要同时展示这两种信息，以提供更全面的用户体验。本文将介绍如何通过自定义分页渲染函数，在 Swiper.js 轮播图中同时显示进度条和分页数字。

实现原理

Swiper.js 允许我们自定义分页的渲染方式，通过 pagination.type: 'custom' 和 pagination.renderCustom 选项，我们可以完全控制分页的显示内容。我们的目标是在 renderCustom 函数中，同时生成进度条和分页数字的 HTML 代码，并将它们组合在一起。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

代码示例

以下是一个完整的代码示例，展示了如何在 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 class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<style>
  .swiper {
    width: 600px;
    height: 300px;
  }

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

  .progressbar-fill {
    height: 100%;
    background-color: #007bff;
    width: 0%; /* Initial width */
  }

  .swiper-pagination {
    text-align: center;
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #ddd;
    margin: 0 5px;
    cursor: pointer;
  }

  .swiper-pagination-bullet-active {
    background: #007bff;
  }
</style>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.mySwiper', {
    keyboard: {
      enabled: true,
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'custom',
      renderCustom: function (swiper, current, total) {
        // Render the progress bar
        var progressBarHtml = '<div class="progressbar"><div class="progressbar-fill" style="width:' + (current / total) * 100 + '%"></div></div>';

        // Render the pagination numbers
        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>';
        }

        // Combine the progress bar and pagination numbers
        return progressBarHtml + paginationHtml;
      }
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    mousewheel: {
      releaseOnEdges: true,
    },
  });
</script>

登录后复制

代码解释

HTML 结构： 我们创建了一个包含轮播内容的 swiper-wrapper，以及用于显示分页信息的 swiper-pagination 元素。
CSS 样式： 我们定义了进度条和分页数字的样式。 .progressbar 用于创建进度条的容器，.progressbar-fill 用于填充进度条的颜色。.swiper-pagination-bullet 定义了分页数字的样式，.swiper-pagination-bullet-active 定义了当前激活分页数字的样式。
JavaScript 代码：
- 我们使用 new Swiper() 初始化 Swiper 实例。
- 在 pagination 配置中，我们将 type 设置为 'custom'，并定义了 renderCustom 函数。
- renderCustom 函数接收三个参数：swiper (Swiper 实例), current (当前 slide 的索引), total (总 slide 数量)。
- 在 renderCustom 函数中，我们首先生成进度条的 HTML 代码。 progressBarHtml 包含一个 progressbar 容器和一个 progressbar-fill 元素。 progressbar-fill 的 width 属性根据当前 slide 的索引计算得出，表示进度百分比。
- 然后，我们生成分页数字的 HTML 代码。我们循环遍历所有 slide，为每个 slide 创建一个 span 元素，并根据当前 slide 的索引添加 swiper-pagination-bullet-active 类。
- 最后，我们将进度条和分页数字的 HTML 代码连接在一起，并返回。