javascript - Swiper.js slidesPerGroup 或 slidesPerView 没有对奇数项进行分组

Question

我在为客户构建的网站上使用 Swiper.js 作为滑块。他们的要求是这样的：滑块内有 10 个项目，一次可见 4 个，每次单击箭头时，4 个项目将滑出，4 个新项目滑入。所以如果我有幻灯片 1- 10，这是滑块的行为方式：

第一个视图：1-4 张幻灯片第二个视图：5-8 个幻灯片第三个视图：9、10、1、2 个幻灯片第四个视图：3-6 个幻灯片......等等。

这是一个无限循环，并且总是一次滑动 4 个。我尝试使用 swiper.js 创建这样的滑块并且非常接近，但不完全在那里。这是我能够创建的内容：https ://i.gyazo.com/3ef7e1d8f35b067bce961c853214150a.mp4

您会注意到在前两次单击中它很好，正如预期的那样，但是一旦有幻灯片 9、10、1 和 2 在视图中并且我单击下一步，它一次只移动 2 张幻灯片，带来幻灯片 1- 4在视野中。我需要避免这种情况发生，并确保它始终在无限循环中一次移动 4 张幻灯片。这是我的代码：

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',
    },
});

提前致谢！干杯

标签： javascriptsliderswiper.js