本文旨在帮助开发者在使用 Swiper.js 轮播图组件时，同时展示进度条和分页数字。通过自定义分页渲染函数，我们可以将进度条和分页数字整合到一起，提供更丰富的用户体验。本文将提供详细的代码示例和步骤，助你轻松实现这一功能。
在使用 Swiper.js 创建轮播图时，我们经常需要展示分页信息，以便用户了解当前轮播进度。Swiper.js 提供了多种分页类型，如数字分页和进度条分页。然而，有时我们需要同时展示这两种信息，以提供更全面的用户体验。本文将介绍如何通过自定义分页渲染函数，在 Swiper.js 轮播图中同时显示进度条和分页数字。
实现原理
Swiper.js 允许我们自定义分页的渲染方式，通过 pagination.type: 'custom' 和 pagination.renderCustom 选项，我们可以完全控制分页的显示内容。我们的目标是在 renderCustom 函数中，同时生成进度条和分页数字的 HTML 代码，并将它们组合在一起。
代码示例
以下是一个完整的代码示例，展示了如何在 Swiper.js 中同时显示进度条和分页数字：
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<style>
.swiper {
width: 600px;
height: 300px;
}
.progressbar {
width: 100%;
height: 5px;
background-color: #eee;
margin-bottom: 5px;
}
.progressbar-fill {
height: 100%;
background-color: #007bff;
width: 0%; /* Initial width */
}
.swiper-pagination {
text-align: center;
}
.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>
<script src="https://unpkg.com/swiper/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) {
// Render the progress bar
var progressBarHtml = '<div class="progressbar"><div class="progressbar-fill" style="width:' + (current / total) * 100 + '%"></div></div>';
// Render the pagination numbers
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>';
}
// Combine the progress bar and pagination numbers
return progressBarHtml + paginationHtml;
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
mousewheel: {
releaseOnEdges: true,
},
});
</script>代码解释
- HTML 结构： 我们创建了一个包含轮播内容的 swiper-wrapper，以及用于显示分页信息的 swiper-pagination 元素。
- CSS 样式： 我们定义了进度条和分页数字的样式。 .progressbar 用于创建进度条的容器，.progressbar-fill 用于填充进度条的颜色。.swiper-pagination-bullet 定义了分页数字的样式，.swiper-pagination-bullet-active 定义了当前激活分页数字的样式。
-
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 轮播图的分页显示方式。本文提供了一个同时显示进度条和分页数字的示例，你可以根据自己的需求进行修改和扩展，以实现更丰富的分页效果。掌握了这种方法，你就可以为用户提供更直观、更友好的轮播体验。
