刷卡器和当前页面索引

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) 中，活动页面索引的工作方式如下：

Index number of currently active slide

Note, that in loop mode active index value will be always shifted on a number of looped/duplicated slides

还是没看懂那句话。 “在许多循环幻灯片上移动”？

检查 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 作为真实索引。

刷卡器和当前页面索引

Swiper and current page index

html

javascript

swipe

html-framework-7

swiperjs