I am using Swiper 11.1.9 in my Angular 18.1.1 application.

I have a simple 2 slides going from one view to another. I have hooked up to the slidechange so I can save the last slide used.

Normally this all works fine, but I find, if while in a slide, if I reload my data via an HTTPS call, which resets the data in a chartjs chart I have, if I then go to slide to the other slide, I first have the correct slidechange with the new index set, but then it seems to set itself back to the slide I just came from.

My handler looks like this where I log out each time the index changes:

public async slideChanged(ev: any): Promise<void> {
try {
  this.loggerBase.info('Performance getting active index...');
  const swiper: Swiper = ev.detail[0];

  this.currentSliderIndex = swiper.activeIndex;
  if (!this.currentSliderIndex) {
    this.currentSliderIndex = 0;
  }

  this.errors = '';
  this.loggerBase.info(`Performance index set to ${this.currentSliderIndex}`);
  this.dataStore.setNumber(DataStorageKeys.vals.performancePageLastActiveSlideIndex, this.currentSliderIndex);
  await this.setupCurrentSliderPage();
  this.subscribeToUpdates();
} catch (error) {
  this.loggerBase.error(`performance.slideChanged: ${error}`);
}

When it goes wrong, I slide to index no 1, and I see the above handler being called with slide index of 1 (correct), but it is then called a second time with the index set back to 0! So the swiper flicks to the new slide, but then goes back to where we came from.

In the call stack we can see the two simultaneous calls:

Also, when it is going back to slide 0, it has slide direct of next:

Whereas normally, when going back to index 0 this would be prev.

I set the loop property to false, but this made no difference.

 <swiper-container events-prefix="swiper-" [modules]="swiperModules" [loop]="false" [pagination]="true" #swiper (swiper-slidechange)='slideChanged($event)'>

Has anyone else had this issue, know what is causing this, and have any idea how to prevent this?