Swiper Loop Warning: The number of slides is not enough for

Error message

Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

What it means

Emitted by loopFix (src/core/loop/loopFix.ts:92) when there are too few slides for loop mode to work. loopedSlides is derived from slidesPerGroup (adjusted for bothDirections/centeredSlides at loopFix.ts:77-83) plus params.loopAdditionalSlides. The guard at loopFix.ts:88-91 requires slides.length >= slidesPerView + loopedSlides, or for effect:'cards' >= slidesPerView + loopedSlides*2 (cards clones more). With fewer, the cloned fillers overlap the visible viewport and the infinite wrap breaks.

Source

Thrown at src/core/loop/loopFix.ts:92

  const slidesPerGroup: number = params.slidesPerGroupAuto
    ? slidesPerView
    : (params.slidesPerGroup as number);
  let loopedSlides = bothDirections
    ? Math.max(slidesPerGroup, Math.ceil(slidesPerView / 2))
    : slidesPerGroup;

  if (loopedSlides % slidesPerGroup !== 0) {
    loopedSlides += slidesPerGroup - (loopedSlides % slidesPerGroup);
  }
  loopedSlides += params.loopAdditionalSlides!;
  swiper.loopedSlides = loopedSlides;
  const gridEnabled = swiper.grid && params.grid && params.grid.rows! > 1;

  if (
    slides.length < slidesPerView + loopedSlides ||
    (swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2)
  ) {
    showWarning(
      'Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters',
    );
  } else if (gridEnabled && params.grid!.fill === 'row') {
    showWarning('Swiper Loop Warning: Loop mode is not compatible with grid.fill = `row`');
  }

  const prependSlidesIndexes: number[] = [];
  const appendSlidesIndexes: number[] = [];

  const cols = gridEnabled ? Math.ceil(slides.length / params.grid!.rows!) : slides.length;

  const isInitialOverflow =
    initial && cols - (initialSlide as number) < slidesPerView && !bothDirections;

  let activeIndex = isInitialOverflow ? (initialSlide as number) : swiper.activeIndex;

  if (typeof activeSlideIndex === 'undefined') {
    activeSlideIndex = swiper.getSlideIndex(

View on GitHub (pinned to 6138c2a685)

Solutions

Add slides (or duplicates) until count >= slidesPerView + loopedSlides, or >= slidesPerView + 2*loopedSlides for effect:'cards'.
Lower slidesPerView and/or slidesPerGroup so the required minimum drops below the slide count.
Reduce or remove loopAdditionalSlides (loopFix.ts:84) to shrink loopedSlides.
Disable loop:true for low-count cases, or gate loop on a minimum count in your render logic.
If using slidesPerView:'auto', cap it or ensure enough slides for the widest breakpoint.

Example fix

// before -- 2 slides, cards effect -> 2 < 1 + 2*1, warning
new Swiper(el, { loop: true, effect: 'cards', slidesPerView: 1 });
// after -- provide enough slides (>= slidesPerView + 2*loopedSlides) or drop loop
new Swiper(el, { effect: 'cards', slidesPerView: 1 }); // loop removed for small decks

Defensive patterns

Strategy: validation

Validate before calling

function hasEnoughSlidesForLoop(slides: number, slidesPerView: number, slidesPerGroup: number, effect?: string, loopAdditionalSlides = 0, centered = false): boolean {
  let looped = (centered ? Math.max(slidesPerGroup, Math.ceil(slidesPerView / 2)) : slidesPerGroup);
  if (looped % slidesPerGroup !== 0) looped += slidesPerGroup - (looped % slidesPerGroup);
  looped += loopAdditionalSlides;
  const need = effect === 'cards' ? slidesPerView + looped * 2 : slidesPerView + looped;
  return slides >= need;
}
// call before `new Swiper`; for slidesPerView:'auto', resolve the dynamic value first

Type guard

function isLoopCountSufficient(slides: number, slidesPerView: number, slidesPerGroup: number, effect?: string): boolean {
  const looped = slidesPerGroup;
  return slides >= (effect === 'cards' ? slidesPerView + looped * 2 : slidesPerView + looped);
}

Prevention

Guarantee slides.length >= slidesPerView + slidesPerGroup (x2 extra for effect:'cards') before enabling loop.
Gate loop:true on a minimum item count in your render logic so empty/small lists skip loop.
Keep loopAdditionalSlides low; it directly inflates the required minimum (loopFix.ts:84).
For slidesPerView:'auto', test at the widest breakpoint where the dynamic view count is largest.
Watch the 'cards' effect: it doubles the loopedSlides requirement.

When it happens

Trigger: Few slides with a high slidesPerView: 3 slides with { loop:true, slidesPerView:3, slidesPerGroup:1 } gives loopedSlides>=1, and 3 < 3+1 fires the warning. The 'cards' effect doubles the need: 2 slides with { loop:true, effect:'cards', slidesPerView:1 } gives 2 < 1+2. Also triggered by slidesPerView:'auto' resolving to a large dynamic count on wide viewports, or by a large loopAdditionalSlides inflating loopedSlides (loopFix.ts:84).

Common situations: Dynamic lists that occasionally contain very few items; 'cards' effect with a small deck; slidesPerView:'auto' on wide screens inflating the required minimum; setting loopAdditionalSlides too high; responsive breakpoints that raise slidesPerView without guaranteeing enough slides.

Related errors

AI-assisted analysis of nolimits4web/swiper@6138c2a685 (2026-08-12). Data as JSON: /api/errors/058459bffccbcfef. Report an issue: GitHub.