Swiper 和当前页面索引答案

【问题标题】：Swiper and current page indexSwiper 和当前页面索引
【发布时间】：2020-02-19 10:23:38
【问题描述】：

我正在使用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？ (page1 = 1, page2 = 2, page3 = 3)？

【问题讨论】：

标签： javascript html swipe html-framework-7 swiperjs

【解决方案1】：

启用循环后，swiper 将第一张幻灯片复制到最后，而第一张幻灯片之前的最后一张幻灯片也可以保持动画流畅。

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

使用swiper.activeIndex，您正在访问虚拟幻灯片，只需使用swiper.realIndex 作为真实索引。

【讨论】：