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

【问题标题】：How to handle carousel buttons from Angular component in ngx-slick-carousel如何在 ngx-slick-carousel 中处理来自 Angular 组件的轮播按钮
【发布时间】：2019-03-22 01:17:44
【问题描述】：

我正在使用 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
};

【问题讨论】：

标签： angular carousel slick.js

【解决方案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>

【讨论】：

【解决方案2】：

    import {Component, ViewChild} from '@angular/core';
    import { SlickCarouselComponent } from "ngx-slick-carousel";



    @Component({
        selector: 'slick-use-trackby-example',
        template: `
            <ngx-slick-carousel class="carousel"
                                #slickModal="slick-carousel"
                                [config]="slideConfig">
                <div ngxSlickItem *ngFor="let slide of slides; trackBy: _trackBy" class="slide">
                    <img src="{{ slide.img }}" alt="" width="100%">
                </div>
            </ngx-slick-carousel>

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




    })
    export class SlickTrackbyExampleComponent {
        @ViewChild('slickModal', { static: true }) slickModal: SlickCarouselComponent;

        slides = [
            {img: 'http://placehold.it/350x150/000000'},
            {img: 'http://placehold.it/350x150/111111'},
            {img: 'http://placehold.it/350x150/333333'},
            {img: 'http://placehold.it/350x150/666666'}
        ];

      slideConfig = {
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: false,
        autoplay: false,
        autoplaySpeed: 3000,
        speed: 1500,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
            }
          }
        ]
      };
      next() {
        this.slickModal.slickNext();
      }
      prev() {
        this.slickModal.slickPrev();
      }

    }

【讨论】：