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

Swiper.js进度条与分页数字教程

2025-08-20 19:36:31 0浏览收藏

想要在 Swiper.js 轮播图中同时展示进度条和分页数字，提升用户体验吗？本文将为你提供一份详尽的教程。Swiper.js 提供了强大的自定义分页功能，通过 `pagination.type: 'custom'` 和 `pagination.renderCustom` 选项，开发者可以灵活控制分页的显示内容。本文将深入讲解如何自定义分页渲染函数，将进度条和分页数字巧妙地整合在一起，并提供完整的代码示例和详细步骤，助你轻松实现这一功能，让你的 Swiper.js 轮播图更具吸引力，更易于用户理解当前轮播进度。快来学习吧！

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

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

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

实现原理

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

代码示例

以下是一个完整的代码示例，展示了如何在 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 代码连接在一起，并返回。