Swiper Loop Mode Indexing Limits

Direct Answer

Use the slideChange event to read swiper.realIndex — it reflects the settled, original-slide index (0…N‑1) after every transition. During the animation, realIndex still holds the previous slide’s index; it updates atomically only when the transition ends.

Why activeIndex Misleads in Loop Mode

With loop: true, Swiper injects cloned slides at both ends. activeIndex counts every slide including clones, so it jumps into the clone range during the wrap‑around. realIndex ignores clones and always maps to the original data order.

Behavior at the Loop Boundary

• Transition start (last original → first clone): activeIndex moves into the clone zone; realIndex remains N‑1.
• Transition end: Swiper snaps the viewport to the real first slide and fires slideChange; realIndex becomes 0.
• Mid‑animation events (slideChangeTransitionStart, slideNextTransitionStart, etc.): realIndex has not updated yet.

Recommended Synchronization Pattern

1. Attach a slideChange listener after initialization.

   swiper.on('slideChange', () => {
     if (!swiper.initialized) return;
     externalState.currentSlide = swiper.realIndex;
   });
   

2. If you need the target index before the animation finishes (e.g., for a progress indicator), compute it from activeIndex and the known clone count:

   const looped = swiper.params.loopedSlides || swiper.loopedSlides;
   const targetReal = ((swiper.activeIndex - looped) % swiper.slides.length + swiper.slides.length) % swiper.slides.length;
   

3. For DOM‑based checks (Swiper 8+), original slides carry data-swiper-slide-index="0..N-1"; clones lack the attribute.

Guardrails

• realIndex is undefined before init and after destroy() — guard with swiper.initialized.
• After dynamic slide add/remove with loop enabled, call swiper.loopDestroy(), swiper.loopCreate(), or swiper.update() before trusting realIndex.
• RTL reverses visual direction but realIndex semantics stay 0…N‑1 in data order.
• Nested Swipers each maintain independent realIndex; bind handlers to the correct instance.

Verification Checklist

• Create a minimal Swiper with loop: true, 3 slides.
• Log activeIndex and realIndex in slideChangeTransitionStart, slideChangeTransitionEnd, and slideChange.
• Confirm realIndex jumps from 2 → 0 only inside the slideChange callback.
• Inspect the DOM: original slides have data-swiper-slide-index; clones do not.

One diagnostic detail that would change the recommendation: Are you using a Swiper version prior to 8? The data-swiper-slide-index attribute and some event timing guarantees were formalized in v8; older versions may require slideChangeTransitionEnd instead of slideChange for a settled realIndex.