如何使用Swiper JS修改每次点击切换的幻灯片数量？

你需要使用Swiper内置的slidesPerGroup配置项，它的作用就是指定每次点击导航按钮（或触发自动滑动）时切换的幻灯片数量。

结合你的场景，在600px以上屏幕设置了slidesPerView: 3（一次显示3张），只需在对应断点配置中添加slidesPerGroup: 3，就能实现点击一次切换3张的效果。

修改后的JavaScript代码 #

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15,
      slidesPerGroup: 3 // 新增：每次切换3张幻灯片
    }
  }
});

补充说明 #

• 如果需要在不同屏幕尺寸下设置不同的切换数量，可以在对应的断点中单独配置slidesPerGroup
• 若全局（比如小屏幕）需要保持逐个切换，只需不设置该参数（默认值为1）

内容的提问来源于stack exchange，提问作者Parit Sawjani