滑动器和当前页面索引

Question

我正在使用Swiper API让用户在我的 HTML5/JS/CSS 网站上的多个页面上滑动。我初始化了 swiper（请注意，我使用的是 Framework7，其中包含 Swiper API 作为内部模块，该app对象代表 Framework7 实例：

var swiper = app.swiper.create('#swiper', {
    speed: 200,
    spaceBetween: 0,
    initialSlide: 0,
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    autoHeight: true,
});

我的 HTML 上还有三张幻灯片：

<div class="swiper-container" id="swiper">
    <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>

我编写了一个监听器来监听页面更改：每次用户滑动到下一页时，transitionEnd都会触发该事件

swiper.on("transitionEnd", function(e){
    var slideIndex = swiper.activeIndex;
    console.log("I'm on slide no: "+slideIndex);
});

当我尝试检索当前幻灯片索引 ( swiper.activeIndex) 时，我得到非常奇怪的结果：我希望得到一个数字，0、1 或 2（当前页面索引）。如果我不环绕，我会得到 1,2,3（好吧，不是基于 0，完全没问题，我会添加 -1）。如果我环绕（Swiper 无缝地循环滑动，环绕页面），我也会得到 0 和 4 作为索引，我不知道为什么。

文档说，在循环模式 ( loop: true) 下，活动页面索引的工作方式如下：

当前活动幻灯片的索引号

请注意，在循环模式下，活动索引值将始终在许多循环/重复的幻灯片上移动

还是不太明白那句话。“在一些循环幻灯片上移动”？

检查 HTML，我可以看到 Swiper API 在“真实”幻灯片序列的最左边和最右边创建了额外的“重复”幻灯片，以创建跨页面无缝循环的效果。

但如果实际上我只有 3 页，为什么我还得到索引 0 和 4 而不是 1、2、3？（第 1 页 = 1，第 2 页 = 2，第 3 页 = 3）？

Answer 1

启用循环后，滑动器会将第一张幻灯片复制到末尾，并且第一张幻灯片之前的最后一张幻灯片也会保持动画流畅。

3 页 + 2 个重复项 = 5 页（索引 0-4）

当swiper.activeIndex您访问虚拟幻灯片时，只需使用swiper.realIndex真实索引即可。