如何在Swiper.js中实现自定义分页？

你当前的代码存在几个关键问题，导致自定义分页无法正常工作：

• renderCustom函数中直接调用swiper.realIndex时，swiper实例还未完全初始化，会触发错误
• 你尝试操作的.swiper-pagination-custom元素并未生成，renderCustom的核心逻辑是动态创建分页内容
• 自定义分页的点击跳转逻辑缺失，需要手动绑定事件

以下是修正后的完整实现方案：

1. HTML 结构（保持原有结构即可） #

<div class="...">
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="../../images/services__first-slide.png" alt="slide">
            </div>
            <div class="swiper-slide">
                <img src="../../images/services__second-slide.png" alt="slide">
            </div>
            <div class="swiper-slide">
                <img src="../../images/services__third-slide.png" alt="slide">
            </div>
            <div class="swiper-slide">
                <img src="../../images/services__fourth-slide.png" alt="slide">
            </div>
            <div class="swiper-slide">
                <img src="../../images/services__fifth-slide.png" alt="slide">
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

2. CSS 样式（自定义激活状态） #

.swiper-pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}
.services__pagination-block {
    padding: 8px 16px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s;
}
.services__pagination-block.swiper-pagination-custom-active {
    background-color: #007aff;
    color: #fff;
    border-color: #007aff;
}

3. JavaScript 完整代码 #

// 导入Swiper及所需模块（模块化项目需引入）
import Swiper from 'swiper';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

// 分页项模板数组
const menu = [
    '<div class="services__pagination-block"> <img src="../images/services-pagination__first-item.svg"> <p class="services__pagination-title">Complex design-project</p></div>',
    '<div class="services__pagination-block"> <img src="../images/services-pagination__second-item.svg"> <p class="services__pagination-title">Planning solution</p></div>',
    '<div class="services__pagination-block"> <img src="../images/services-pagination__third-item.svg"> <p class="services__pagination-title">Author supervision</p></div>',
    '<div class="services__pagination-block"> <img src="../images/services-pagination__fourth-item.svg"> <p class="services__pagination-title">Repair and decoration</p></div>',
    '<div class="services__pagination-block"> <img src="../images/services-pagination__fifth-item.svg"> <p class="services__pagination-title">Express-design</p></div>'
];

// 初始化Swiper
const swiper = new Swiper('.swiper', {
    loop: true,
    speed: 2000,
    autoplay: {
        delay: 2000
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'custom',
        // renderCustom接收三个参数：swiper实例、当前激活索引、总slide数
        renderCustom: function (swiper) {
            let paginationHTML = '';
            // 遍历生成所有分页项
            menu.forEach((item, index) => {
                // loop模式下用realIndex判断激活状态
                const isActive = index === swiper.realIndex;
                paginationHTML += `<div class="swiper-pagination-custom ${isActive ? 'swiper-pagination-custom-active' : ''}" data-index="${index}">${item}</div>`;
            });
            // 返回生成的HTML，Swiper自动插入到分页容器
            return paginationHTML;
        }
    },
    modules: [Pagination]
});

// 给分页项绑定点击跳转事件（事件委托）
document.querySelector('.swiper-pagination').addEventListener('click', function(e) {
    const target = e.target.closest('.swiper-pagination-custom');
    if (target) {
        const index = parseInt(target.dataset.index);
        // loop模式下用slideToLoop跳转到真实索引对应的slide
        swiper.slideToLoop(index);
    }
});

关键修正点说明 #

• renderCustom参数使用：必须用函数传入的swiper实例，避免初始化时机导致的变量未定义问题
• 动态生成元素：在renderCustom中拼接分页项HTML，返回后由Swiper自动渲染到容器
• 点击事件处理：通过事件委托绑定点击逻辑，使用slideToLoop实现loop模式下的正确跳转
• 激活状态判断：loop模式下必须用swiper.realIndex获取真实的当前slide索引，避免复制slide导致的索引混乱

内容的提问来源于stack exchange，提问作者fpbidni