Virtual Slides in Swiper.js: Container Height Fails to Recalculate After Dynamic Content Change

Direct Answer

Swiper's Virtual Slides module does not automatically recalculate container height when the content of an already-rendered slide changes after initialization. The height is measured during the initial render and only refreshed when you explicitly ask Swiper to update.

Answers to Your Three Questions

1. Automatic recalculation? No. Virtual Slides does not observe DOM mutations inside rendered slides. Even with observer: true or observeParents: true, the MutationObserver only watches for structural changes (slides added or removed), not inner content or size changes within an existing slide.
2. Documented trigger? Yes — call swiper.update() after the content change. For finer control, swiper.updateSize() followed by swiper.updateSlides() re-reads dimensions and resizes the wrapper. There is no dedicated event such as slideContentChange.
3. Does slidesPerView: 1 fix it? It often masks the symptom, because Swiper re-fits the container to the active slide on each slideChangeTransitionEnd. But a mid-slide content growth still goes unnoticed until the next slide change or an explicit update().

Recommended Pattern

After any async injection, image load, or CSS-driven height change, call update() inside requestAnimationFrame to avoid layout thrashing:

// After mutating slide content
requestAnimationFrame(() => {
  swiper.update();
});

// For images inside a slide
slideEl.querySelectorAll('img').forEach((img) => {
  img.addEventListener('load', () => swiper.update(), { once: true });
});

Prerequisites and Cautions

• Slides must use CSS height: auto. Fixed heights or overflow: hidden on the slide element prevent correct measurement, especially with slidesPerView: 'auto' in vertical mode.
• Do not call update() in a tight loop (e.g., an undebounced resize handler); debounce it.
• In virtual mode, update() re-renders the visible slide range, so keep your renderSlide function idempotent and fast.

Verification

Build a minimal vertical Swiper with virtual: true and slidesPerView: 'auto', then grow a slide via setTimeout(() => slideEl.style.height = '200px', 1000). The wrapper height should stay unchanged until swiper.update() runs. Repeat with slidesPerView: 1: the wrapper resizes only on the next slide transition, confirming the behavior is consistent across Swiper 8.x and 9.x.