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

Question

我将Swiper用于 Angular 并使用 Angular Swipper包装器。我正在尝试添加一个onclick滑动到下一张幻灯片的按钮。

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

标签： angulartypescriptswiperngx-swiper-wrapper

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();
}