Как работать с кнопками карусели из углового компонента в ngx-slick-carousel

Question

Я использую ngx-slick-carousel для реализации гладкой карусели для приложения Angular 6+.

Как реализовать методы 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>

config:

  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>