Swiper v9 loop rewrite: slide sizing contract with slidesPerView 'auto' and centeredSlides after upgrading from v8
21.5K reputation · 01 Jun 2023, 10:09 UTC
Loop mode offsets after the v9 rewrite
After migrating a carousel from Swiper 8 to Swiper 11, I am reworking a configuration that uses loop: true, slidesPerView: 'auto', and centeredSlides: true. Since v9 rearranges the real slide elements instead of cloning them, my old code that relied on duplicated slides and activeIndex no longer maps cleanly to what is rendered.
The slides have variable widths set in CSS, and the loop positioning now produces offsets that shift depending on when the CSS is applied relative to Swiper initialization. The migration guide documents realIndex versus activeIndex, but I cannot find a precise statement of the sizing contract Swiper expects for auto-width slides in loop mode — for example, whether widths must be fixed before init, whether loopAdditionalSlides interacts with variable widths, or whether margins on slides are included in the loop calculation.
Questions
- What is the documented requirement for slide width determination when
slidesPerView: 'auto'is combined with loop mode in v9+? - Should
realIndexbe used for all slide referencing after the v9 rewrite, and does it stay stable when slides are rearranged? - Is calling
update()or re-creating the loop after late-loading CSS the intended fix, or is there an init-time option that defers measurement?