Swiper组件如何修改分页滚动时的切换幻灯片数量？

要实现点击分页时每次滚动3张幻灯片的效果，你只需要在Swiper的配置选项中添加slidesPerGroup: 3属性即可，这对应你提到的Slick插件中slideToScroll的功能。

修改后的完整代码如下：

var swiper = new Swiper('.product-swiper ', {
  autoplay: {
    delay: 3000,
  },
  slidesPerView: 4,
  slidesPerGroup: 3, // 新增：控制每次滚动的幻灯片数量
  spaceBetween: 10,

  pagination: {
    el: '.product-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  },
});

说明 #

• slidesPerGroup属性专门用于设置Swiper每次滑动（包括点击分页器、触发自动播放）时滚动的幻灯片数量。
• 配合你已设置的slidesPerView: 4（同时显示4张），每次滚动3张的逻辑可以正常工作，分页器的切换也会对应到每组幻灯片的位置。

内容的提问来源于stack exchange，提问作者fateme barzegar