如何在 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>