当有一张幻灯片时，Swiper js 显示 3 张相同的幻灯片答案

【问题标题】：Swiper js showing 3 identical slides when there is one slide当有一张幻灯片时，Swiper js 显示 3 张相同的幻灯片
【发布时间】：2020-06-30 19:28:54
【问题描述】：

我正在尝试在页面中添加 3 张可见幻灯片。问题是，只要幻灯片少于 3 张，这些幻灯片就会被复制以填充空白空间，因此，例如，如果我只有一张幻灯片，它会显示同一张幻灯片的三个相同副本。有什么办法可以避免吗？我希望只显示一张幻灯片。

这里是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,
});

我查看了 Swiper 文档，但找不到有关此类配置的任何信息。如何解决这个问题？

【问题讨论】：

标签： javascript swiper

【解决方案1】：

只需将loop 参数从true 更改为false

【讨论】：

这确实解决了问题，但无限循环很常见。一种方法是动态添加循环。

【解决方案2】：

在创建 SWIPER 之前添加这些行

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

例如：

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

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

【讨论】：

【解决方案3】：

按照github 问题的建议，在初始化 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,
});


swiper.loopDestroy();

它允许你有循环但不会创建任何重复。

【讨论】：