Question
Swiper 8: loop‑mode slide duplication when slidesPerGroup exceeds 1 and slide count is uneven
Kavi Cedar
0 reputation · 24 Jun 2021, 19:34 UTC
143.4K views1
Loading…
0 reputation · 24 Jun 2021, 19:34 UTC
Swiper 8 introduced ES‑module distribution and required explicit registration of components such as Pagination and Navigation. A side effect of the loop‑mode refactor is that when slidesPerGroup is greater than one and the total number of slides is not a multiple of that group size, the automatic duplication of slides can leave a visual gap or misalign the active index at the loop boundary.
Determine the intended behavior for this edge case and whether a configuration exists to handle it cleanly in Swiper 8.
The Swiper migration guide notes the removal of implicit slide duplication logic but does not specify behavior for uneven group counts. The loopedSlides calculation was refactored after v8, so identical configurations may produce different DOM structures across releases.
1. What is the intended behavior of Swiper’s loop mode when slidesPerGroup > 1 and the total slide count is not a multiple of slidesPerGroup?
2. Does Swiper provide a configuration option to adjust duplicated slide count or to eliminate visual gaps at the loop boundary?
3. Is the current duplication logic a known bug in Swiper 8, and has it been addressed in later releases?
33275 reputation · 24 Jun 2021, 22:56 UTC
swiperslidesPerGroup, enabling seamless group‑wise sliding. When the original slide count is not a multiple, Swiper 8’s automatic loopedSlides calculation does not add enough duplicates, leaving a visual gap or index misalignment at the loop boundary.loopedSlides property manually to the smallest number that makes (totalSlides + loopedSlides) % slidesPerGroup === 0. This forces the needed duplication and removes the gap.slidesPerGroup value, so the issue is resolved in later releases.loopedSlides option to manually set duplicated slides.slidesPerGroup value automatically.The automatic loopedSlides calculation in v8 only considered slidesPerView, not slidesPerGroup. When slidesPerGroup > 1 and the slide count is uneven, the computed duplication is insufficient, causing a gap at the boundary.
totalSlides) and note the slidesPerGroup value.const needed = Math.ceil(totalSlides / slidesPerGroup) * slidesPerGroup - totalSlides;new Swiper('.swiper', {
loop: true,
loopedSlides: needed,
slidesPerGroup: 2, // example; replace with your value
slidesPerView: 'auto'
});
.swiper-slide-duplicate elements; their count should be needed * 2 (duplicates on both sides).Use comments to ask for clarification. Post a solution as an answer.
33,275 reputation · 25 Jun 2021, 05:47 UTC
Swiper 8.x does not automatically rebalance an incomplete final group when slidesPerGroup > 1 and the slide count is not a multiple of the group size. Use loopFillGroupWithBlank: true to insert placeholder slides that complete the group; those placeholders remain in the DOM and may still create visible space unless hidden with CSS. loopAdditionalSlides only adds extra duplicates and does not specifically pad the short remainder. If you override loopedSlides manually, keep it consistent with slidesPerGroup and total slide count to avoid breaking duplicate alignment. Verify with a minimal page of seven slides, loop: true, and slidesPerGroup: 3, then inspect duplicated nodes and compare activeIndex with realIndex; results can differ between 8.0.0 and later 8.x patches.