I'm trying to have 3 visible slides in the page. The problem is that whenever there are less than 3 slides those slides are duplicated to fill also the empty spaces so, for instance, if I have just one slide it shows three identical copies of the same slide. Is there any way to avoid that ? I would like just the single slide to be shown.

Here's the configuration of the swiper:

var swiper = new Swiper('.campaign-slider-two', {
    slidesPerView: 3,
    spaceBetween: 0,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        767: {
            slidesPerView: 1,
        },
    },
    pagination: {
        el: '.campaign-pagination',
        clickable: true,
    },
    loop: true,
});

I took a look at the Swiper documentation but I couldn't find anything about this kind of configurations. How to solve this issue?

I'm trying to have 3 visible slides in the page. The problem is that whenever there are less than 3 slides those slides are duplicated to fill also the empty spaces so, for instance, if I have just one slide it shows three identical copies of the same slide. Is there any way to avoid that ? I would like just the single slide to be shown.

Here's the configuration of the swiper:

var swiper = new Swiper('.campaign-slider-two', {
    slidesPerView: 3,
    spaceBetween: 0,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        767: {
            slidesPerView: 1,
        },
    },
    pagination: {
        el: '.campaign-pagination',
        clickable: true,
    },
    loop: true,
});

I took a look at the Swiper documentation but I couldn't find anything about this kind of configurations. How to solve this issue?

• javascript
• swiper.js

4 Answers 4

Simply change the loop parameter from true to false

ADD THESE LINES BEFORE CREATING YOUR SWIPER

const swiper = this.swiper;
swiper.loopDestroy();
swiper.loopCreate();

For Example:

const swiper = this.swiper;
swiper.loopDestroy();
swiper.loopCreate();

var swiper = new Swiper('.swiper-container', { 
    slidesPerView: 'auto',
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});`

Manually destroying the loop after initializing swiper worked for me as suggested on this github issue:

var swiper = new Swiper('.campaign-slider-two', {
    slidesPerView: 3,
    spaceBetween: 0,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        767: {
            slidesPerView: 1,
        },
    },
    pagination: {
        el: '.campaign-pagination',
        clickable: true,
    },
    loop: true,
});


swiper.loopDestroy();

It allows you have loop but would not create any duplicates.

If you know in advance how many items there will be, you can set slidesPerView accordingly:

var swiper = new Swiper('.campaign-slider-two', {
    slidesPerView: Math.min(items.length, 3),
    spaceBetween: 0,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: Math.min(items.length, 2),
        },
        767: {
            slidesPerView: Math.min(items.length, 1),
        },
    },
    pagination: {
        el: '.campaign-pagination',
        clickable: true,
    },
    loop: true,
});