Active Slide Index Stuck on Last Slide After Looping

[CaioMS2000]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-7q3863

Bug description

I'm using the slider in a simple way with the default settings I configured. I'm monitoring the active slide with onSlideChange, and at first, it works well. The autoplay transitions through the images as expected, but the issue starts when it reaches the last slide. Since I'm logging the active slide, I can see that after it reaches the last one, even though it loops back to the first slide (due to the active loop), it keeps logging the index of the last slide every time.

Expected Behavior

Since I tested with 3 images, it should log sequentially as 0, 1, 2, 0, 1, 2, and so on.

Actual Behavior

It's logging 0, 1, 2, 2, 2, 2. The slider is correctly looping through the images, but the indices remain "stuck" on the last one.

Swiper version

11.1.15

Platform/Target and Browser Versions

Windows 11 - WSL

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[apnnux]

Same, also this bug is present for back to, if you looping from 0 to last index remining 0

[Nut41tank]

Have same problem. on version 11.1.15

[Wimmind]

Has anyone solved this problem?

[apnnux]

You can use realIndex instead of activeIndex when loop option is active, it's a correct looped index

[Wimmind]

I had to calculate the current real index myself

const getRealSlideIndex: GetRealSlideIndex = (stateParams, index) => {
  const [state] = stateParams
  const { swiper } = state
  const slides = swiper?.wrapperEl.querySelectorAll('.swiper-slide') || []

  const realIndex = Array.from(slides).findIndex((item) => item.getAttribute(`data-swiper-slide-index`) === `${index}`)

  return realIndex === -1 ? index : realIndex
}

[IDrumsey]

Getting this issue too. Happening for both activeIndex and realIndex. It jumps between the second to last and last indeces though.

1 2 3 4 5 4 5 4 5

[xhoantran]

This set up works correctly for me on version 11.2.5

const [activeIndex, setActiveIndex] = useState(0);

<Swiper
  onActiveIndexChange={swiper => setActiveIndex(swiper.realIndex)}
>

[richardcalahan]

"realIndex" lol this api is a joke