当前位置：首页 > 文章列表 > 文章 > 前端 > Swiper进度条与分页数字自定义方法

Swiper进度条与分页数字自定义方法

2025-08-06 20:51:37 0浏览收藏

还在为Swiper.js滑块插件无法同时展示进度条和分页数字而烦恼吗？本文提供一套详细的自定义方案，教你如何利用Swiper.js的`renderCustom`函数，巧妙地将进度条和分页数字整合到一起，打造更具吸引力的用户界面。文章将深入讲解`pagination`选项的配置，`renderCustom`函数的实现逻辑，以及必要的CSS样式调整，并提供完整代码示例，助你轻松实现Swiper进度条与分页数字的完美结合，提升网站用户体验。让你的Swiper滑块不再单调，更具互动性和信息量！

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

本文将介绍一种使用 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>

注意事项