{"record":{"id":"024a4bd277de404b","repo":"nolimits4web/swiper","slug":"swiper-loop-warning-the-number-of-slides-is-not-e","errorCode":null,"errorMessage":"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)","messagePattern":"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\\)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/core/loop/loopCreate.ts","lineNumber":55,"sourceCode":"  const shouldFillGrid = gridEnabled && swiper.slides.length % params.grid!.rows! !== 0;\n\n  const addBlankSlides = (amountOfSlides: number): void => {\n    for (let i = 0; i < amountOfSlides; i += 1) {\n      const slideEl = swiper.isElement\n        ? createElement('swiper-slide', [params.slideBlankClass!])\n        : createElement('div', [params.slideClass!, params.slideBlankClass!]);\n      swiper.slidesEl.append(slideEl);\n    }\n  };\n\n  if (shouldFillGroup) {\n    if (params.loopAddBlankSlides) {\n      const slidesToAdd = slidesPerGroup - (swiper.slides.length % slidesPerGroup);\n      addBlankSlides(slidesToAdd);\n      swiper.recalcSlides();\n      swiper.updateSlides();\n    } else {\n      showWarning(\n        '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)',\n      );\n    }\n\n    initSlides();\n  } else if (shouldFillGrid) {\n    if (params.loopAddBlankSlides) {\n      const slidesToAdd = params.grid!.rows! - (swiper.slides.length % params.grid!.rows!);\n      addBlankSlides(slidesToAdd);\n      swiper.recalcSlides();\n      swiper.updateSlides();\n    } else {\n      showWarning(\n        '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)',\n      );\n    }\n    initSlides();\n  } else {","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/nolimits4web/swiper/blob/6138c2a6857d17fe097149dd3b975b2387d0b2dc/src/core/loop/loopCreate.ts#L37-L73","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","solutions":["Re-enable loopAddBlankSlides:true (this is the default) so Swiper auto-inserts blank filler slides via addBlankSlides and recalculates.","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).","Set slidesPerGroup to a value that divides the current slide count (e.g. use 1 or a common divisor).","If exact divisibility is impossible and blank slides are unacceptable, disable loop:true and use a non-looping carousel."],"exampleFix":"// before -- 7 slides, group of 3, blanks disabled -> warning\nnew Swiper(el, { loop: true, slidesPerGroup: 3, loopAddBlankSlides: false });\n// after -- let Swiper pad automatically (default), or align the count\nnew Swiper(el, { loop: true, slidesPerGroup: 3, loopAddBlankSlides: true });\n// or make 7 -> 9 slides (or slidesPerGroup: 1)","handlingStrategy":"validation","validationCode":"function loopGroupWarning(slides: number, slidesPerGroup: number, gridRows = 1, loopAddBlankSlides = true): string | null {\n  if (loopAddBlankSlides) return null;\n  const eff = slidesPerGroup * gridRows;\n  return slides % eff === 0 ? null : `slides (${slides}) not divisible by slidesPerGroup*gridRows (${eff})`;\n}\nconst el = document.querySelector('.swiper')!;\nconst count = el.querySelectorAll('.swiper-slide').length;\nconst msg = loopGroupWarning(count, params.slidesPerGroup ?? 1, params.grid?.rows ?? 1, params.loopAddBlankSlides ?? true);\nif (msg) console.warn(msg); // or fix params before `new Swiper`","typeGuard":"function isEvenToLoopGroup(slides: number, slidesPerGroup: number, gridRows = 1): boolean {\n  return slides % (slidesPerGroup * gridRows) === 0;\n}","tryCatchPattern":null,"preventionTips":["Leave loopAddBlankSlides at its default (true) unless you can guarantee exact divisibility.","When enabling grid, remember slidesPerGroup is multiplied by grid.rows (loopCreate.ts:34); size your data accordingly.","For dynamic/CMS data, compute count % effectiveGroup before constructing Swiper and either pad data or enable blank slides.","Use breakpoints carefully: a slidesPerGroup that divides at one breakpoint may not at another."],"tags":["loop","slidespergroup","config","grid","loopaddblankslides"],"backgroundTag":null,"analyzedSha":"6138c2a6857d17fe097149dd3b975b2387d0b2dc","analyzedAt":"2026-08-12T21:16:10.868Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}