本文介绍了如何在 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 字符串，用于渲染分页元素。

   

   CSS工具箱(专业版)

   全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

   下载

   在函数内部，首先创建进度条的 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 样式，可以创建出美观且信息丰富的轮播图分页。