Does Swiper loop mode reconcile original slide count with pagination bullet indices?

Direct Answer

Yes, Swiper's pagination bullets always correspond to the original slide count (realIndex 0..n-1), not the cloned DOM slides created by loop mode. The clickable pagination behavior consistently navigates to the correct real slide position using slideToLoop(realIndex) internally, regardless of the initial slide index or clone offset.

How Index Mapping Works

When loop: true is enabled, Swiper clones the first and last slides (default one each side, configurable via loopedSlides) to create seamless cyclic transitions. This creates a discrepancy between two index systems:

• activeIndex — the current DOM slide position including clones
• realIndex — the original slide index (0 to n-1) that pagination and user logic should reference

The pagination module operates exclusively on realIndex. The default renderBullet function receives the real index as its argument, and clickable bullets call slideToLoop(realIndex), which calculates the optimal target slide (including clone offset) for the shortest transition path.

Clickable Pagination Behavior

Clicking a bullet never lands on a cloned duplicate as a final resting position unless that clone represents the optimal path for the transition (e.g., looping backward from slide 0 to the last slide). The component normalizes the target using realIndex, so bullet 0 always navigates to the first original slide (or its clone when looping backward), bullet 1 to the second, and so on. This mapping remains consistent regardless of the initial slide index or loopedSlides value.

Configuration for Accurate Index Mapping

No manual index adjustment is required for standard usage. To customize bullets with accurate indices:

1. Use the renderBullet callback — the provided index parameter is already realIndex
2. Read swiper.realIndex in event handlers (slideChange, slideChangeTransitionEnd) for dynamic updates
3. Avoid assuming index === activeIndex in custom render functions when loop is active

If you manually call slideTo() instead of slideToLoop(), you must account for the clone offset yourself; slideToLoop() handles this automatically.

Verification Steps

Confirm the behavior in your implementation:

1. Open browser devtools on a page with Swiper loop + pagination enabled
2. Inspect swiper.realIndex and swiper.activeIndex while clicking bullets
3. Observe that realIndex matches the bullet index (0..n-1) while activeIndex differs by the clone offset
4. Add console.log('realIndex:', swiper.realIndex, 'activeIndex:', swiper.activeIndex) in an on('slideChange') handler to trace transitions

Dynamic Slides Caveat

If you add or remove slides dynamically with loop enabled, call swiper.loopDestroy(), update slides, then swiper.loopCreate() or swiper.update() to keep realIndex and pagination in sync.

Diagnostic Detail Needed

Are you using a custom renderBullet that references activeIndex or assumes the passed index matches the DOM position? This is the most common cause of misalignment.