我使用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张幻灯片。这是我的密码:
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',
},
});
提前感谢!干杯
发布于 2022-05-02 12:08:32
您缺少了循环的设置:
loopFillGroupWithBlank: true,
https://stackoverflow.com/questions/60207996
复制相似问题