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>

Answer 2

Image.network('https://cdn.mos.cms.futurecdn.net/LEkEkAKZQjXZkzadbHHsVj-970-80.jpg')

如何从ngx-slick-carousel中的Angular组件处理轮播按钮

2 个答案: