Question

我可以使用this.realIndex获取当前幻灯片索引，如documentation所示，但是this.previousIndex不能产生先前活动幻灯片的realIndex。相反，它提供了activeIndex的等效项，如滑块循环时所反映的那样。如何获得先前活动幻灯片的realIndex？这是Swiper中的错误吗？这可能需要进入本地存储吗？

这是一支笔，我将幻灯片索引记录到控制台。请注意previousIndex的作用是什么：https://codepen.io/thenomadicmann/pen/GRRPeWG?editors=1111

Answer 1

this.previousIndex - 1应该为您提供先前活动幻灯片的realIndex，如果this.previousIndex - 1的值为-1，那就意味着没有先前活动的幻灯片，这就是一个陷阱。刚刚初始化了滑动器，但尚未完成滑动。这是因为初始化滑动程序时，this.previousIndex与activeIndex是initialized。

Answer 2

@neevany很近，让我走上了正轨。但是，对于希望使用slideChange事件在循环的Swiper中访问previousIndex的任何人，您不仅需要纠正他描述的-1索引问题，还需要纠正在swwiper循环时发生的double slideChange事件。下面的代码：

// Have to use previousIndex in this fashion due to a bug in Swiper.js as of 11/21/19
let previousIndex = this.previousIndex - 1;
if ( previousIndex == -1 ) {
    previousIndex = 0;
} else if ( previousIndex == document.querySelectorAll( '.swiper-slide' ).length ) { // When swiper loops, slideChange gets fired twice and messes up animations. This prevents it from doing so.
    return;
}

Answer 3

对我来说，以前的答案没有帮助。我创建了一个将swiper.realIndex存储在变量中的函数。然后，我只是在pagechange上更新变量。

var previousIndex;
function getPreviousIndex(){
  previousIndex = swiper.realIndex;
};

getPreviousIndex();
swiper.on('slideChange', function () {
  getPreviousIndex();
});

如何使用Swiper.js获取幻灯片的先前活动索引？

3 个答案: