nolimits4web/swiper · warning

Swiper Loop Warning: The number of slides is not even to gri

Error message

Swiper Loop Warning: The number of slides is not even to grid.rows, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)

What it means

Emitted by loopCreate in the else-if (shouldFillGrid) branch at src/core/loop/loopCreate.ts:68. It fires only when grid is enabled (grid.rows > 1), the slide count is not divisible by grid.rows, and loopAddBlankSlides is false. IMPORTANT caveat grounded in the source: shouldFillGrid (slides % grid.rows !== 0) logically implies shouldFillGroup (slides % (slidesPerGroup*grid.rows) !== 0), because grid.rows divides slidesPerGroup*grid.rows. Since the first if (shouldFillGroup) branch at line 48 is checked first, this else-if is effectively unreachable when grid is enabled. A developer who sees this text most likely actually triggered error [1] (the slidesPerGroup variant) or an older build where the branch ordering differed.

Source

Thrown at src/core/loop/loopCreate.ts:68

      const slidesToAdd = slidesPerGroup - (swiper.slides.length % slidesPerGroup);
      addBlankSlides(slidesToAdd);
      swiper.recalcSlides();
      swiper.updateSlides();
    } else {
      showWarning(
        'Swiper Loop Warning: The number of slides is not even to slidesPerGroup, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)',
      );
    }

    initSlides();
  } else if (shouldFillGrid) {
    if (params.loopAddBlankSlides) {
      const slidesToAdd = params.grid!.rows! - (swiper.slides.length % params.grid!.rows!);
      addBlankSlides(slidesToAdd);
      swiper.recalcSlides();
      swiper.updateSlides();
    } else {
      showWarning(
        'Swiper Loop Warning: The number of slides is not even to grid.rows, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)',
      );
    }
    initSlides();
  } else {
    initSlides();
  }

  const bothDirections =
    params.centeredSlides || !!params.slidesOffsetBefore || !!params.slidesOffsetAfter;
  swiper.loopFix({
    slideRealIndex,
    direction: bothDirections ? undefined : 'next',
    initial,
  });
}

View on GitHub (pinned to 6138c2a685)

Solutions

1. Re-enable loopAddBlankSlides:true so Swiper pads the final row with blank slides (addBlankSlides at loopCreate.ts:62-66).
2. Add/remove slides so the count is an exact multiple of grid.rows.
3. Verify which warning actually fired: with grid enabled and the current source you will see error [1] (slidesPerGroup text), not this one; fix per error [1].
4. If blanks are unacceptable, disable loop or reduce grid.rows so the count divides evenly.

Example fix

// before -- 7 slides, grid.rows 3, blanks disabled
new Swiper(el, { loop: true, grid: { rows: 3 }, loopAddBlankSlides: false });
// after -- enable blank padding (default) or pad to a multiple of 3
new Swiper(el, { loop: true, grid: { rows: 3 }, loopAddBlankSlides: true }); // add 2 blanks -> 9

function loopGridWarning(slides: number, gridRows: number, loopAddBlankSlides = true): string | null {
  if (loopAddBlankSlides) return null;
  return slides % gridRows === 0 ? null : `slides (${slides}) not divisible by grid.rows (${gridRows})`;
}
// Note: in the current source this branch is unreachable for grid configs (shouldFillGroup fires first);
// if you see this text with grid on, verify you are actually hitting error [1].
const msg = loopGridWarning(count, params.grid?.rows ?? 1, params.loopAddBlankSlides ?? true);

function isEvenToGridRows(slides: number, gridRows: number): boolean {
  return slides % gridRows === 0;
}

When it happens

Trigger: Intended trigger: { loop:true, grid:{rows:3}, loopAddBlankSlides:false } with a slide count not divisible by 3. In the current source this branch is unreachable for grid configs because shouldFillGrid implies shouldFillGroup (loopCreate.ts:34-37,48,61), so the first branch handles it and emits error [1] instead. Reachable only in a build where the order/effective divisor differs.

Common situations: Multi-row looping carousels built from dynamic data where the last row is incomplete; copying a grid.rows config into a looping slider; upgrading Swiper versions where loopCreate's branch logic or the slidesPerGroup*rows multiplier changed; misattributing the warning text when error [1] is what actually fired.

Related errors

• Swiper Loop Warning: The number of slides is not even to sli
• Swiper Loop Warning: Loop mode is not compatible with grid.f
• Swiper Loop Warning: The number of slides is not enough for

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