Swiper js showing 3 identical slides when there is one slide

user_12246981 0
Viewed 9143

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?

swiper.js javascript
3 Answers

Simply change the loop parameter from true to false

user_47713110

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.

user_46240770

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,
    },
});`
user_33687030
Related