Angular中SwiperJS点击箭头滑动3-4张幻灯片的实现问题

有两种方案可以实现点击箭头滑动3/4张幻灯片的需求，根据你的场景选择即可：

方案一：利用Swiper内置配置自动分组滑动 #

直接在Swiper配置中添加slidesPerGroup项，指定每次滑动的幻灯片数量，这种方式无需修改现有滑动方法，Swiper会自动处理滑动逻辑：

swiperConfig: any = {
  slidesPerView: 'auto',
  loop: true,
  spaceBetween: 20,
  slidesPerGroup: 3, // 这里设置每次滑动3张，改成4就是滑动4张
  autoplay: {
    delay: 1000,
    disableOnInteraction: false,
  },
};

你的scrollLeft和scrollRight方法可以保持不变，调用slidePrev/slideNext时会自动按照slidesPerGroup设置的数量滑动。

方案二：自定义索引实现精确滑动 #

如果需要动态调整滑动数量（比如不同场景下滑动3或4张），可以通过计算目标索引，调用slideTo方法实现：

scrollLeft() {
  const currentIndex = this.swiper!.swiperRef.activeIndex;
  // 每次向左滑动3张，改成4即可调整滑动数量
  const targetIndex = currentIndex - 3;
  this.swiper!.swiperRef.slideTo(targetIndex, 500);
  this.scrollArrows();
}

scrollRight() {
  const currentIndex = this.swiper!.swiperRef.activeIndex;
  // 每次向右滑动3张
  const targetIndex = currentIndex + 3;
  this.swiper!.swiperRef.slideTo(targetIndex, 500);
  this.scrollArrows();
}

由于你开启了loop: true，Swiper会自动处理循环边界的索引问题，无需额外判断。

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