angular - 使用 Angular 中的自定义按钮进行滑动分页/导航

Question

我正在使用 Swiper对于 Angular 和使用 Angular Swipper wrapper用它。我正在尝试添加一个 onclick 滑动到下一张幻灯片的按钮。

但我不知道如何获取 Swiper 实例以及如何调用 slidenext 函数。我该怎么做？提前致谢。

Answer 1

Angular 12/Swiper 6.8.1

.html

<swiper [slidesPerView]="4" [spaceBetween]="50">
    <ng-template swiperSlide>
      <app-product-item></app-product-item>
    </ng-template>
</swiper>
<button (click)="swipeNext()">Prev</button>
<button (click)="swipePrev()">Next</button>

.ts

@ViewChild(SwiperComponent) swiper: SwiperComponent;


swipePrev() {
  this.swiper.swiperRef.slidePrev();
}
swipeNext() {
  this.swiper.swiperRef.slideNext();
}