Swiper.js：同时显示进度条和分页数字的自定义方法

本文介绍了如何在 Swiper.JS 轮播图中同时显示进度条和分页数字。通过自定义分页渲染函数 renderCustom，可以灵活地组合进度条和分页数字，并自定义它们的样式，从而实现更丰富的用户体验。本文提供了详细的代码示例和步骤说明，帮助开发者轻松实现这一功能。

在 Swiper.js 中，默认情况下只能选择显示进度条或分页数字。然而，通过自定义分页功能，我们可以同时呈现这两种元素，从而提供更全面的轮播图状态信息。

以下是如何使用 renderCustom 函数实现此功能的步骤：

1. 配置 pagination 选项:

   在 Swiper 实例的配置中，将 pagination.type 设置为 ‘custom’，并提供一个 pagination.renderCustom 函数。

   var swiper = new Swiper('.mySwiper', {   pagination: {     el: '.swiper-pagination',     type: 'custom',     renderCustom: function (swiper, current, total) {       // 自定义渲染逻辑     }   }, });

2. 实现 renderCustom 函数:

   renderCustom 函数接收三个参数：swiper（swiper 实例），current（当前幻灯片的索引），total（幻灯片的总数）。该函数应返回一个 html 字符串，用于渲染分页元素。

   在函数内部，首先创建进度条的 HTML。 然后，创建分页数字的HTML。 最后，将这两个HTML字符串连接起来并返回。

   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,   }, });

3. 自定义 css 样式:

   通过 CSS 样式调整进度条和分页数字的外观。以下是一些示例 CSS 规则：

   .progressbar {   width: 100%;   height: 5px;   background-color: #eee; }  .progressbar-fill {   height: 100%;   background-color: #007bff; }  .swiper-pagination-bullet {   width: 12px;   height: 12px;   display: inline-block;   border-radius: 50%;   background-color: #ccc;   margin: 0 5px;   cursor: pointer; }  .swiper-pagination-bullet-active {   background-color: #007bff; }

注意事项:

• 确保 Swiper.js 版本支持 renderCustom 功能。
• 可以根据需要自定义进度条和分页数字的 HTML 结构和 CSS 样式。
• renderCustom 函数的性能可能影响轮播图的流畅度，应尽量优化代码。

总结:

通过使用 Swiper.js 的 renderCustom 函数，可以轻松地同时显示进度条和分页数字，从而提升用户体验。 这种方法具有很高的灵活性，允许开发者完全控制分页元素的外观和行为。 通过结合适当的 CSS 样式，可以创建出美观且信息丰富的轮播图分页。