Swiper.js loop when slidesPerView is bigger than half of the amount of Slides

Question

As it seems since version 9 of swiper.js you cannot loop through your slides if you do not have more than double the slides available than slidesPerView. So for example if I want to build a slider that shows 5 products at once, and want to loop through a list of 7 products I cannot do that. If I show just 1 or 2 products at once everything is fine.

This behavior seems to come from the new loop logic they implemented. Here is my configuration for the swiper:

const params = 
            modules: [Autoplay, Pagination, Navigation],
            autoplay: {
                enabled: false,
                speed: 3000,
            },
            speed: 400,
            navigation: true,
            pagination:{
                enabled: true,
                dynamicBullets: true,
                dynamicMainBullets: 4
            },
            loop: true,
            spaceBetween: 30,
            centeredSlides: false,
            breakpoints: {
                0: {
                    slidesPerView: 1,
                },
                [BREAKPOINT_WIDTH.extraSmall*16]: {
                    slidesPerView: 3
                },
                [BREAKPOINT_WIDTH.medium*16]: {
                    slidesPerView: 3
                },
                [BREAKPOINT_WIDTH.large*16]: {
                    slidesPerView: 5
                }
            },
        };

Is there an option I overlooked? Or has somebody a solution for the problem?

---

EDIT: As of v11 of Swiperjs this is fixed and it works again.

Wallywalnut

Experiencing same issue where slidesPerView: 3 and only 4 slides rendered. Tested on version 8 with no problems. I'll submit a bug report. – Latticed

@Latticed Could you please link the bug report to your comment ? – Nominalism

Answer 1

Sadly, from the v9 the loop isn't working anymore, as you mention and as explained on their documentation

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2

So sadly for now you have no option than dirty work arround.

1. Stay on swiper v8

2. Increase your total number of slides by duplicating the rendered item Poor solution

if(slidesPerView * 2 < items?.length) items = items.concat(items)

3. Put a limit on your slidesPerView to adapt himself to how many items you'll be rendering

const slidesPerView = items.length >= slidesPerView * 2 ? slidesPerView : Math.floor(items.length / 2)

Note: I saw that even if you respect the number, if you add autoHeight: true it wont be working properly

Note

I've already open an issue in the swiper.js Github repo, but this went closed as not planned, so we'll have to live with it :/

Od

I cloned items as in 2 and it worked fine, but I agree solution is subpar. – Enterectomy

Any new solution for this? I have total 7 slides and slidesPerView is 6. In loop mode, its completely broken functionality – Welloiled

@KiranLala No sorry, I'll update my answer as soon as swiper.js does an update. – Nominalism

@KiranLala They have closed my feature request, so I think this will be the way to do for the next couple of month/year :/ – Nominalism

Thank for the response but I think this options will not work when you have breakpoints with less quantity slidesPerView – Clerkly

Answer 2

This has finally been fixed in v11, as mentioned in the changelog. If anyone's still facing this issue, they should upgrade to v11.

Assumed

Answer 3

For those who need snippet with JavaScript, please see my code below.

const swiperElement = document.querySelector(".swiper");
const swiperWrapper = swiperElement.querySelector(".swiper-wrapper");
const swiperSlides = swiperElement.querySelectorAll(".swiper-slide");
swiperSlides.forEach((slide,_) => {
  const clonedSlide = slide.cloneNode(true);
  swiperWrapper.appendChild(clonedSlide);
});
const swiper = new Swiper(swiperElement, {
  slidesPerView: "auto",
  loop: true,
  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

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

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
  .swiper-slide {
    width: 25%;
  }
</style>

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Zinkenite

Answer 4

Updating of Swipe to v11 is helped me. I had issue with scrolling when slidesPerView > 1

Verticillate

Answer 5

This still does not work as of v 11.1.9, when loopAdditionalSlides is applied and if that the value of loopAdditionalSlides is larger than the amount of slides. One will get this same warning and the loop breaks. As such, loopAdditionalSlides does not work at all anyway if it means that additional slides would be created to facilitate a more smooth loop.

Odell

Answer 6

The problem is actually very simple. When you type 4 in the Loop for example, you should have 4 elements in the Swipper. The number of elements in Swipper must be the same number as the loop or less so that it does not give this warning.

Ligule