Swiper.js slidesPerGroup or slidesPerView not grouping the odd items

Question

I'm using Swiper.js for a slider on a website I'm building for a client. Their requirement is something like this: There are 10 items inside the slider, 4 will be visible at one time, and everytime you click on the arrow, 4 items will slide out with 4 new items sliding in. So if I had slides 1-10, this is how the slider should behave:

First view: 1-4 slides Second view: 5-8 slides Third view: 9, 10, 1, 2 slides Fourth view: 3-6 slides.... and so on.

It is an infinite loop, and will always slide 4 at a time. I tried to create such a slider using swiper.js and got very close, but not quite there. Here's what I was able to create: https://i.gyazo.com/3ef7e1d8f35b067bce961c853214150a.mp4

You'll notice that it is fine in the first two clicks, going as expected, but once there are slide 9, 10, 1 and 2 in view and I click next, it only moves 2 slides at a time, bringing slides 1-4 in view. I need to avoid this from happening, and ensure it always moves 4 slides at a time, in an infinite loop. Here's my code:

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 4,
    spaceBetween: 10,
    slidesPerGroup: 4,
    loop: true,
    loopFillGroupWithBlank: false,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

Thanks in advance! Cheers

Answer 1

You are missing a setting for the loop:

loopFillGroupWithBlank: true,