Angular中使用SwiperJs实现点击切换3张幻灯片的问题

方法一：通过配置全局设置切换数量 #

直接在你的swiperConfig里添加slidesPerGroup: 3，这样默认的切换方法就会一次性跳3张，不用改现有的按钮逻辑：

swiperConfig: any = {
  slidesPerView: 'auto',
  loop: true,
  spaceBetween: 20,
  slidesPerGroup: 3, // 新增配置项
  autoplay: {
    delay: 1000,
    disableOnInteraction: false,
  },
};

你的切换方法保持原样就行：

scrollLeft() {
  this.swiper!.swiperRef.slidePrev(500);
  this.scrollArrows();
}

scrollRight() {
  this.swiper!.swiperRef.slideNext(500);
  this.scrollArrows();
}

方法二：手动计算索引实现自定义切换 #

如果需要动态调整切换数量，就用slideTo方法直接跳转到目标位置，避免重复调用切换方法无效的问题：

scrollLeft() {
  const currentIndex = this.swiper!.swiperRef.activeIndex;
  const targetIndex = currentIndex - 3;
  this.swiper!.swiperRef.slideTo(targetIndex, 500);
  this.scrollArrows();
}

scrollRight() {
  const currentIndex = this.swiper!.swiperRef.activeIndex;
  const targetIndex = currentIndex + 3;
  this.swiper!.swiperRef.slideTo(targetIndex, 500);
  this.scrollArrows();
}

关键说明 #

• 重复调用slidePrev/slideNext没用是因为Swiper在动画过程中会忽略同类请求，必须一次性指定目标位置。
• 用slidesPerGroup时，循环模式下会自动处理幻灯片数量不足的情况，非循环模式最后一组可能显示剩余的幻灯片。

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