如何配置Swiper实现滑块一次跳过3张图片？

要实现每次切换跳过对应数量的图片，只需在Swiper配置中添加slidesPerGroup属性——该属性用于设置每次滑动切换的滑块数量，同时要在breakpoints里为不同屏幕尺寸配置对应的值，与slidesPerView保持一致即可。

修改后的代码如下：

var swiper = new Swiper(".slide-content", {
  slidesPerView: 3,
  slidesPerGroup: 3, // 新增：大屏每次切换3张
  spaceBetween: 25,
  loop: true,
  centerSlide: "true",
  fade: "true",
  grabCursor: "true",
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
    0: {
      slidesPerView: 1,
      slidesPerGroup: 1, // 小屏每次切换1张
    },
    520: {
      slidesPerView: 2,
      slidesPerGroup: 2, // 中屏每次切换2张
    },
    950: {
      slidesPerView: 3,
      slidesPerGroup: 3, // 大屏每次切换3张
    },
  },
});

注意：slidesPerGroup的取值建议和slidesPerView保持一致，这样每次滑动后正好切换一整组当前显示的滑块数量；如果开启了loop模式，需确保滑块总数足够（至少为slidesPerView * 2以上），避免循环时出现显示异常。

内容的提问来源于stack exchange，提问作者THIAGÃO4K