nolimits4web/swiper · warning

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

Error message

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)

What it means

Emitted by loopCreate (src/core/loop/loopCreate.ts:55) during loop initialization. Loop mode continuously rearranges DOM slides to fake infinity; for the wrap to be seamless the slide count must divide evenly into effective slidesPerGroup. Here slidesPerGroup is multiplied by grid.rows when grid is enabled (loopCreate.ts:34), so the effective divisor is slidesPerGroup * grid.rows. When the count is not divisible and loopAddBlankSlides is false (default is true per src/core/defaults.ts:107), Swiper warns and proceeds in a degraded loop.

Source

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

  const shouldFillGrid = gridEnabled && swiper.slides.length % params.grid!.rows! !== 0;

  const addBlankSlides = (amountOfSlides: number): void => {
    for (let i = 0; i < amountOfSlides; i += 1) {
      const slideEl = swiper.isElement
        ? createElement('swiper-slide', [params.slideBlankClass!])
        : createElement('div', [params.slideClass!, params.slideBlankClass!]);
      swiper.slidesEl.append(slideEl);
    }
  };

  if (shouldFillGroup) {
    if (params.loopAddBlankSlides) {
      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 {

View on GitHub (pinned to 6138c2a685)

Solutions

1. Re-enable loopAddBlankSlides:true (this is the default) so Swiper auto-inserts blank filler slides via addBlankSlides and recalculates.
2. Add or remove real slides until the count is divisible by slidesPerGroup (and by grid.rows when grid is on, since the effective divisor is the product).
3. Set slidesPerGroup to a value that divides the current slide count (e.g. use 1 or a common divisor).
4. If exact divisibility is impossible and blank slides are unacceptable, disable loop:true and use a non-looping carousel.

Example fix

// before -- 7 slides, group of 3, blanks disabled -> warning
new Swiper(el, { loop: true, slidesPerGroup: 3, loopAddBlankSlides: false });
// after -- let Swiper pad automatically (default), or align the count
new Swiper(el, { loop: true, slidesPerGroup: 3, loopAddBlankSlides: true });
// or make 7 -> 9 slides (or slidesPerGroup: 1)

function loopGroupWarning(slides: number, slidesPerGroup: number, gridRows = 1, loopAddBlankSlides = true): string | null {
  if (loopAddBlankSlides) return null;
  const eff = slidesPerGroup * gridRows;
  return slides % eff === 0 ? null : `slides (${slides}) not divisible by slidesPerGroup*gridRows (${eff})`;
}
const el = document.querySelector('.swiper')!;
const count = el.querySelectorAll('.swiper-slide').length;
const msg = loopGroupWarning(count, params.slidesPerGroup ?? 1, params.grid?.rows ?? 1, params.loopAddBlankSlides ?? true);
if (msg) console.warn(msg); // or fix params before `new Swiper`

function isEvenToLoopGroup(slides: number, slidesPerGroup: number, gridRows = 1): boolean {
  return slides % (slidesPerGroup * gridRows) === 0;
}

When it happens

Trigger: new Swiper(el, { loop: true, slidesPerGroup: 3, loopAddBlankSlides: false }) with a slide count not divisible by 3 (e.g. 7 slides). With grid on, the divisor grows: { loop:true, slidesPerGroup:2, grid:{rows:3}, loopAddBlankSlides:false } makes effective slidesPerGroup = 2*3 = 6 (loopCreate.ts:34), so any count not divisible by 6 triggers it. The branch is entered when shouldFillGroup = swiper.slides.length % slidesPerGroup !== 0 is true (loopCreate.ts:36,48).

Common situations: CMS/product feeds that yield odd or dynamic slide counts; explicitly setting loopAddBlankSlides:false to avoid visible blank space; raising slidesPerGroup without aligning data; enabling grid mode which silently multiplies the group size via loopCreate.ts:34; upgrading from a version where the multiplier or default differed.

Related errors

• Swiper Loop Warning: The number of slides is not even to gri
• 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/024a4bd277de404b. Report an issue: GitHub.