Swiper JS 11版本切换事件失效，进度条与分数无法同步更新

你的问题核心在于事件名称错误，以及索引计算的细节适配，以下是修正方案和完整代码：

关键问题分析 #

1. 事件名错误：Swiper 11 的滑块切换完成事件为 slideChange，你使用的 swiperslidechange 是错误命名，导致分数更新逻辑无法触发。
2. 索引适配：当设置 slidesPerView: 3 时，若要让分数与进度条的整体滑动进度对应，使用 activeIndex 比 realIndex 更合适（realIndex 是当前可见区域第一个滑块的原始索引，若你需要显示该序号也可保留，按需选择）。

修正后的完整代码 #

<body>
<div class="swiper">
    <div id="fraction" class="swiper-fraction"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://picsum.photos/600?random=1" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/600?random=2" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/600?random=3" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/600?random=4" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/600?random=5" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/600?random=6" alt="">
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const fraction = document.getElementById("fraction");

const swiper = new Swiper('.swiper', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    spaceBetween: 10,
    pagination: {
        el: '.swiper-pagination',
        type: "progressbar",
    },
    on: {
        // 修正为正确的事件名
        slideChange: () => {
            // 用 activeIndex+1 对应进度条整体进度，需显示可见首个滑块序号则替换为 swiper.realIndex +1
            fraction.textContent = `${swiper.activeIndex + 1} / ${swiper.slides.length}`;
        },
        // 可选：若要实时跟随进度条滑动更新分数，启用下方事件
        // progress: () => {
        //     const current = Math.ceil(swiper.progress * swiper.slides.length);
        //     fraction.textContent = `${current} / ${swiper.slides.length}`;
        // }
    }
});

// 初始化时设置初始分数
fraction.textContent = `${swiper.activeIndex + 1} / ${swiper.slides.length}`;
</script>

额外优化 #

• 直接通过 swiper.slides.length 获取滑块总数，无需额外DOM查询，减少冗余操作。
• 若需要分数完全跟随进度条的滑动过程实时更新，可启用代码中注释的 progress 事件。

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