angular - 如何在 ngx-slick-carousel 中处理来自 Angular 组件的轮播按钮

Question

我正在使用 ngx-slick-carousel为 Angular 应用程序实现一个圆滑的轮播。
如何创建next和 prev从组件切换幻灯片的方法？
这是我的 html:

<ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig" (init)="slickInit($event)" (breakpoint)="breakpoint($event)" (afterChange)="afterChange($event)" (beforeChange)="beforeChange($event)">
    <div ngxSlickItem *ngFor="let slide of slides" class="slide">
        <img [src]="slide.image" alt="" width="100%">
    </div>
</ngx-slick-carousel>

配置:

slideConfig = {
    centerPadding: '60px',
    slidesToShow: 2,
    slidesToScroll: 1,
    arrows: false
};

Answer 1

成分:

import { SlickCarouselComponent } from 'ngx-slick-carousel';

@ViewChild('slickModal') slickModal: SlickCarouselComponent;

next() {
  this.slickModal.slickNext();
}

prev() {
  this.slickModal.slickPrev();
}

HTML:

<button class="btn-next" (click)="next()">next</button>
<button class="btn-prev" (click)="prev()">prev</button>