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 字符串，用于渲染分页元素。

   

   MvMmall 网店系统

   免费的开源程序长期以来，为中国的网上交易提供免费开源的网上商店系统一直是我们的初衷和努力奋斗的目标，希望大家一起把MvMmall网上商店系统的免费开源进行到底。2高效的执行效率由资深的开发团队设计，从系统架构,数据库优化，配以通过W3C验证的面页模板，全面提升页面显示速度和提高程序负载能力。3灵活的模板系统MvMmall网店系统程序代码与网页界面分离，灵活的模板方案，完全自定义模板，官方提供免费模

   下载

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

   var swiper = new Swiper('.mySwiper', {
     keyboard: {
       enabled: true,
     },
     pagination: {
       el: '.swiper-pagination',
       type: 'custom',
       renderCustom: function (swiper, current, total) {
         // 渲染进度条
         var progressBarHtml = '
   ';
   
         // 渲染分页数字
         var paginationHtml = '';
         for (var i = 0; i < total; i++) {
           var className = 'swiper-pagination-bullet';
           if (i === current - 1) {
             className += ' swiper-pagination-bullet-active';
           }
           paginationHtml += '' + (i + 1) + '';
         }
   
         // 组合进度条和分页数字
         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 样式，可以创建出美观且信息丰富的轮播图分页。