swiper多行多列,点击每次切换多列数据,每次切换指定个列数

swiper多列展示中,默认每次滚动是滚动的一列数据。

那么如果我们需要每次滚动2列或者3列亦或者更多需要如何处理呢?

slidesPerGroup在carousel mode下定义slides的数量多少为一组。

代码展示:

<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
slidesPerColumn: 2,
spaceBetween : 25,
slidesPerGroup: 2,//2列为一组,既每次滚动一组的数据=两列
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

每次滚动两列数据,代码展示!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!