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

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

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

实现原理

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

OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

下载

代码示例

以下是一个完整的代码示例，展示了如何在 Swiper.js 中同时显示进度条和分页数字：

  

    
Slide 1
    
Slide 2
    
Slide 3
    
Slide 4
    
Slide 5
  
  

  

  

代码解释

1. HTML 结构： 我们创建了一个包含轮播内容的 swiper-wrapper，以及用于显示分页信息的 swiper-pagination 元素。
2. CSS 样式： 我们定义了进度条和分页数字的样式。 .progressbar 用于创建进度条的容器，.progressbar-fill 用于填充进度条的颜色。.swiper-pagination-bullet 定义了分页数字的样式，.swiper-pagination-bullet-active 定义了当前激活分页数字的样式。
3. 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 代码连接在一起，并返回。

注意事项

• CSS 样式： 你可以根据自己的设计需求，自定义进度条和分页数字的 CSS 样式。
• HTML 结构： 确保 HTML 结构与代码示例一致，特别是 swiper-pagination 元素的存在。
• Swiper.js 版本： 此代码示例适用于 Swiper.js 5 及以上版本。

总结

通过自定义分页渲染函数，我们可以灵活地控制 Swiper.js 轮播图的分页显示方式。本文提供了一个同时显示进度条和分页数字的示例，你可以根据自己的需求进行修改和扩展，以实现更丰富的分页效果。掌握了这种方法，你就可以为用户提供更直观、更友好的轮播体验。