0

我正在使用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）？

4

1 回答 1

3

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

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

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

于 2021-03-21T02:22:47.177 回答