本文将介绍一种使用 Swiper.JS 同时显示进度条和分页数字的解决方案。通过自定义分页渲染函数，将进度条和分页数字的 html 结构组合在一起，实现更丰富的用户界面。
Swiper.js 是一款流行的滑块插件，提供了丰富的功能和灵活的配置选项。虽然 Swiper.js 允许显示进度条或分页数字，但默认情况下无法同时显示两者。本文将介绍如何通过自定义分页渲染函数 renderCustom 来实现同时显示进度条和分页数字。
实现步骤
-
配置 pagination 选项：
在 Swiper 实例的 pagination 选项中，设置 type 为 ‘custom’，并提供一个 renderCustom 函数。
var swiper = new Swiper('.mySwiper', { // ... 其他配置 pagination: { el: '.swiper-pagination', type: 'custom', renderCustom: function (swiper, current, total) { // 自定义渲染逻辑 } }, // ... 其他配置 }); -
实现 renderCustom 函数：
renderCustom 函数接收三个参数：swiper (Swiper 实例), current (当前滑块索引), total (滑块总数)。该函数需要返回一个 HTML 字符串，作为分页器的内容。
renderCustom: function (swiper, current, total) { // 1. 生成进度条 HTML var progressBarHtml = '<div class="progressbar"><div class="progressbar-fill" style="width:' + (current / total) * 100 + '%"></div></div>'; // 2. 生成分页数字 HTML 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>'; } // 3. 组合进度条和分页数字 HTML return progressBarHtml + paginationHtml; }这段代码首先生成一个包含进度条的 HTML 结构。progressbar 类用于定义进度条的样式，progressbar-fill 类用于控制进度条的填充宽度，宽度根据当前滑块的索引计算得出。
然后，代码循环生成分页数字的 HTML 结构。swiper-pagination-bullet 类用于定义分页数字的样式，swiper-pagination-bullet-active 类用于标记当前激活的滑块。
最后，代码将进度条和分页数字的 HTML 字符串连接起来，作为 renderCustom 函数的返回值。
-
添加 css 样式：
为了正确显示进度条和分页数字，需要添加相应的 CSS 样式。
.progressbar { width: 100%; height: 5px; background-color: #eee; margin-bottom: 5px; /* 调整进度条与分页数字的间距 */ } .progressbar-fill { height: 100%; background-color: #007bff; /* 修改进度条颜色 */ width: 0; /* 初始宽度为 0 */ } .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; /* 修改激活状态的颜色 */ }可以根据实际需求自定义这些 CSS 样式。
完整代码示例
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> <style> .swiper { width: 600px; height: 300px; } .swiper-slide { background: #eee; display: flex; justify-content: center; align-items: center; font-size: 24px; } .progressbar { width: 100%; height: 5px; background-color: #eee; margin-bottom: 5px; } .progressbar-fill { height: 100%; background-color: #007bff; width: 0; } .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> </head> <body> <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> <div class="swiper-pagination"></div> </div> <script src="https://unpkg.com/swiper@8/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) { 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, }, }); </script> </body> </html>
注意事项
- 确保引入 Swiper.js 的 CSS 和 JavaScript 文件。
- 根据实际需求调整 CSS 样式，以获得最佳显示效果。
- 可以根据需要修改 renderCustom 函数中的 HTML 结构，例如添加自定义的图标或文本。
总结
通过自定义 Swiper.js 的 renderCustom 函数，可以灵活地控制分页器的显示内容，实现同时显示进度条和分页数字等更复杂的功能。这种方法为开发者提供了更大的自由度，可以根据具体需求定制用户界面。
