I am able to get the current slide index using this.realIndex, as shown in the documentation, but this.previousIndex is not yielding the realIndex of the previously active slide. Instead, it offers the equivalent of the activeIndex, as reflected when the slider loops. How can I get the realIndex of the previously active slide? Is this a bug in Swiper? Does this maybe need to go into local storage?

Here is a pen with me logging the slide indexes to the console. Notice how previousIndex does nothing useful:

I am able to get the current slide index using this.realIndex, as shown in the documentation, but this.previousIndex is not yielding the realIndex of the previously active slide. Instead, it offers the equivalent of the activeIndex, as reflected when the slider loops. How can I get the realIndex of the previously active slide? Is this a bug in Swiper? Does this maybe need to go into local storage?

Here is a pen with me logging the slide indexes to the console. Notice how previousIndex does nothing useful: https://codepen.io/thenomadicmann/pen/GRRPeWG?editors=1111

• javascript
• swiper.js

Share Improve this question Follow edited Nov 18, 2019 at 22:02 Tanner Mann asked Nov 18, 2019 at 20:39 Tanner MannTanner Mann 54211 gold badge66 silver badges2121 bronze badges 2

• the answer of @neevany seems to work, and is probably the only way. The problem is, that when the event is fired. In your function the properties are already set, to the new values. You can test this by executing console.info(mySwiper.realIndex, mySwiper.previousIndex, mySwiper.activeIndex) in the console before transitioning. The values are correct. – winner_joiner Commented Nov 21, 2019 at 9:33
• @winner_joiner: Agreed, neevany's answer seems to work surprisingly. I thought maybe it would work only going one direction but seems to work when going backward and forward. Either way, this seems like a bug so I'll be sure to report it on Github. I will award neevany the bounty tonight once I am able. – Tanner Mann Commented Nov 21, 2019 at 23:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2 +50

this.previousIndex - 1 should give you the realIndex of the previously active slide, one catch is, if this.previousIndex - 1 value is -1 which means there is no previously active slide, i.e the swiper in just initialized and no swipes have been done yet. this is because this.previousIndex is initialized with activeIndex when the swiper is initialized.

@neevany was close and got me on the right track. However, for anyone looking to access previousIndex within a looped Swiper using the slideChange event, you'll need to correct for not only the -1 index issue he described, but also for the double slideChange event that occurs when the swiper loops. Code below:

// 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;
}

For me the previous answers didn`t help. I created a function which stores the swiper.realIndex in a variable. Then I just update the variable on pagechange.

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

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