首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Swiper.js slidesPerGroup或slidesPerView不对奇数项进行分组

Swiper.js slidesPerGroup或slidesPerView不对奇数项进行分组
EN

Stack Overflow用户
提问于 2020-02-13 12:34:49
回答 1查看 3.8K关注 0票数 3

我使用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,然后单击next,它一次只移动2张幻灯片,在视图中显示幻灯片1-4。我需要避免这种情况发生,并确保它总是在一个无限循环中每次移动4张幻灯片。这是我的密码:

代码语言:javascript
运行
复制
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',
    },
});

提前感谢!干杯

EN

回答 1

Stack Overflow用户

发布于 2022-05-02 12:08:32

您缺少了循环的设置:

代码语言:javascript
运行
复制
loopFillGroupWithBlank: true,
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60207996

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档