Swiper Virtual Slides and Loop Mode Integration

Answer to the questions

1. Virtual index synchronization.

• When loop:true is active, Swiper internally creates loopedSlides – a set of duplicate slides that sit before and after the real slides.
• The virtual module keeps two pointers: virtualStart and virtualEnd. They mark the first and last real slide that are rendered in the DOM.
• On virtual.appendSlide() or virtual.removeSlide(), Swiper recalculates these pointers and adjusts the loopedSlides offsets so that the duplicate set stays in sync with the new data. This is done inside the update() cycle, after the virtual container has been repopulated.

2. activeIndex after a removal.

• If the removed slide is not the one currently active, activeIndex simply stays the same; the index refers to the next logical slide in the sequence.
• If the removed slide is the active one, Swiper automatically moves activeIndex to the nearest existing slide (usually the next one). The transition is handled by slideTo() internally, so the visual position jumps to the new active slide without a flicker.
• Because the loop duplicates are regenerated, activeIndex is always expressed relative to the real slides, not the duplicates.

Practical steps to keep things in sync

1. Use the virtual API only – never manipulate the DOM directly when loop:true is enabled.
2. After calling virtual.appendSlide() or virtual.removeSlide(), immediately invoke swiper.update() (or rely on the automatic update that follows the API call).
3. Verify that virtualStart and virtualEnd have shifted by inspecting swiper.virtual in the console.
4. Listen to onSlideChange or onSlideChangeTransitionEnd to confirm that activeIndex points to a valid slide after a removal.
5. If you notice a visual jump, check that the loopedSlides count matches swiper.params.slidesPerView – mismatches can cause a temporary index mismatch until the next update cycle.

Example snippet

const swiper = new Swiper('.swiper', {
  loop: true,
  virtual: { slides: [] },
  on: {
    init() { console.log('init', swiper.virtualStart, swiper.virtualEnd); },
    slideChange() { console.log('activeIndex', swiper.activeIndex); }
  }
});

// Add a slide
swiper.virtual.appendSlide('New Slide');
swiper.update();

// Remove a slide
swiper.virtual.removeSlide(3);
swiper.update();

What to check next

To fine‑tune the behaviour, it helps to know the Swiper version you’re running, as the loop‑duplicate logic changed from 8.x to 9.x. Could you confirm the exact Swiper version in your project?