当前位置：首页 > 文章列表 > 文章 > 前端 > Swiper进度条与分页数字自定义教程

Swiper进度条与分页数字自定义教程

2025-08-18 13:57:42 0浏览收藏

还在为 Swiper.js 只能显示进度条或分页数字而烦恼吗？本文提供了一种巧妙的解决方案，教你如何在 Swiper.js 中同时展示进度条和分页数字，提升用户体验。文章详细介绍了如何利用 Swiper.js 的 `pagination.type: 'custom'` 和 `pagination.renderCustom` 选项，自定义分页渲染逻辑，将进度条和分页数字的 HTML 结构完美融合。通过本文提供的代码示例和步骤说明，你将轻松掌握 Swiper.js 进度条与分页数字定制技巧，打造更具吸引力的 Web 应用。文章还包含详细的 CSS 样式和注意事项，助你避免踩坑，快速实现所需效果。

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

本文旨在提供一种在 Swiper.js 中同时显示进度条和分页数字的解决方案。通过自定义分页渲染函数，将进度条和分页数字的 HTML 结构组合在一起，并利用 CSS 进行样式控制，从而实现更丰富的用户体验。本文将提供详细的代码示例和步骤说明，帮助开发者轻松实现这一功能。

在 Swiper.js 中，默认情况下只能选择显示进度条或分页数字。然而，在某些场景下，同时显示这两种元素可以提供更全面的信息，增强用户体验。本文将介绍如何通过自定义分页功能，实现进度条和分页数字的共存。

实现方法

核心思路是利用 Swiper.js 提供的 pagination.type: 'custom' 和 pagination.renderCustom 选项，自定义分页的渲染逻辑。在 renderCustom 函数中，我们可以手动构建进度条和分页数字的 HTML 结构，并将它们组合在一起。

以下是一个具体的实现示例：

<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>

代码解释：

HTML 结构： 包含一个 swiper 容器，内部包含 swiper-wrapper 和 swiper-pagination。
JavaScript 代码：
- 初始化 Swiper 实例，并设置 pagination.type 为 custom。
- 在 pagination.renderCustom 函数中：
  - 创建包含进度条的 HTML 结构，其中 progressbar-fill 的宽度根据当前页面的比例动态计算。
  - 创建包含分页数字的 HTML 结构，并为当前页面的数字添加 swiper-pagination-bullet-active 类。
  - 将进度条和分页数字的 HTML 结构组合在一起并返回。
CSS 样式： 定义了进度条和分页数字的样式，包括颜色、大小、圆角等。

注意事项：

需要引入 Swiper.js 的 CSS 和 JavaScript 文件。
可以根据实际需求自定义进度条和分页数字的样式。
确保 swiper-pagination 容器在 HTML 中存在，并且在 JavaScript 中正确引用。
renderCustom 函数的参数 swiper 包含了 Swiper 实例的信息，current 表示当前页面的索引（从1开始），total 表示总页面数。