使用角度自定义按钮进行滑动分页/导航

Question

我使用Swiper进行角度处理，并使用 Angular Swipper包装器。我正在尝试添加一个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();
}