loop with slidesPerView not working in Swiper 9 and 10

When using the loop option and slidesPerView options together in Swiper.js versions 9 and 10, an issue arises where the loop functionality doesn’t work (stops). This document explains the cause of this issue and provides a solution.

Table of Contents

Probable Cause and Occurrence Conditions
Solution 1: Change the Library Version
Solution 2: Add slides manually
Solution 3: Handle it with JavaScript
Summary

Probable Cause and Occurrence Conditions

As far as our research indicates, this issue did not occur until version 8, and it no longer occurs in version 11.
Therefore, it is likely a bug in the library itself

This isue occurs only when the number of slides is less than twice the slidesPerView value.

Solution 1: Change the Library Version

As mentioned earlier, this issue occurs only in versions 9 and 10.
Therefore, if there is no need to use version 9 or 10, changing to a different version appears to be the simplest solution.

<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> --> <!-- removed -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- added -->

Solution 2: Add slides manually

As mentioned earlier, this issue occurs only when the number of slides is less than twice the slidesPerView option value.
Therefore, it occurs in scenarios like the following
※Number of slides (=4) < Twice the slidesPerView value(=6)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-pagination"></div>               
    <div class="swiper-button-prev"></div>              
    <div class="swiper-button-next"></div>    
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

So, adding the same set of slides resolves the issue.
However, it comes with the drawback of duplicated pagination.

<div class="swiper-wrapper">
    <div class="swiper-slide"><img src="./img/sample1.png"></div>
    <div class="swiper-slide"><img src="./img/sample2.png"></div>
    <div class="swiper-slide"><img src="./img/sample3.png"></div>
    <div class="swiper-slide"><img src="./img/sample4.png"></div>
    <div class="swiper-slide"><img src="./img/sample1.png"></div>   <!-- added -->
    <div class="swiper-slide"><img src="./img/sample2.png"></div>   <!-- added -->
    <div class="swiper-slide"><img src="./img/sample3.png"></div>   <!-- added -->
    <div class="swiper-slide"><img src="./img/sample4.png"></div>   <!-- added -->
</div>

Solution 3: Handle it with JavaScript

To solve the issue including duplicated pagination, let’s handle it with JavaScript.
1. Use the Swiper’s event option to add copy of slides at the initialization
2. Remove the duplicated pagination

const swiper = new Swiper('.sample-slider', {
    loop: true,
    slidesPerView: 3,
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*******↓ added ↓*******/
    on: {
        init: function loopBagFix(swiper){
            /* 1. Add a copy of the slides */
            const slides = swiper.slides
            const wrapper = swiper.wrapperEl
            slides.forEach( (slide) => {wrapper.append(slide.cloneNode(true))} )

            /* 2. Remove the duplicated pagination */
            setTimeout(() => {
                const paginations = swiper.pagination.bullets
                paginations.forEach((pagination, index) => {
                    if(index > (paginations.length / 2) - 1){
                        pagination.remove()
                    }
                })
            },100) 
        },
    }
    /*******↑ added ↑*******/
})

Summary

We’ve described three solutions and the simplicity is Solution 1 > Solution 2 > Solution 3.
So, why don’t you try to be flexible depending on the situation as follows?

No need to use Swiper 9 or 10 -> Solution 1: Change the Library Version
No need to display pagination -> Solution 2: Add slides manually
Pagination is absolutely necessary -> Solution 3: Handle it with JavaScript

That is all, it was about cause and solution for the issue which is loop with slidesPerView not working in Swiper 9 and 10.