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: .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

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./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

• javascript
• slider
• swiper.js

Share Improve this question Follow edited Oct 13, 2020 at 7:04 Rich 4,31866 gold badges4444 silver badges7575 bronze badges asked Feb 13, 2020 at 12:34 aditya96aditya96 4111 gold badge11 silver badge22 bronze badges 1

• Did you ever figure this out? – Steven Matthews Commented Dec 9, 2021 at 2:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You are missing a setting for the loop:

loopFillGroupWithBlank: true,

Below is an example used in my project when I use slidesPerGroup={4}.

import SwiperCore, { Navigation, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/scss';
import 'swiper/scss/autoplay';
import 'swiper/scss/pagination';
import "swiper/scss/effect-coverflow";

SwiperCore.use([Navigation, Autoplay]);

const NewArrival = () => {
    return (
        <>
            <Swiper
                slidesPerView={4}
                slidesPerGroup={4}
                spaceBetween={15}
                loop={true}
                autoplay={{
                    delay: 5000,
                    pauseOnMouseEnter: true,
                    disableOnInteraction: false,
                    loopFillGroupWithBlank: false
                }}
                effect={"coverflow"}
                navigation={{
                    prevEl: ".custom_prev_n",
                    nextEl: ".custom_next_n",
                }}
                className="carausel-6-columns carausel-arrow-center"
            >
                <SwiperSlide >
                    {/* Slider 1 */}
                </SwiperSlide>
            </Swiper>
        </>
    );
};

export default NewArrival;