Reference slick instance from component (ngx-slick-carousel)

问题

I am having a tough time trying to reference the instance of a ngx-slick-carousel from within my component. I have a couple of carousels in a page and I need to unslick and intilize them when I toggle between the two. The only way at the moment that I have been able to reference the slick carousel from my component is if I use the afterChange method and pass the event object from my template.

For example

In Template

<ngx-slick-carousel 
     class="carousel gallery-one" 
     #galleryOne="slick-carousel" 
     [config]="slideConfig" 
     (afterChange)="afterChange($event)">

     <div ngxSlickItem *ngFor="let slide of slides.gallery" class="slide">
        <img src="{{slide.img}}">
     </div>
</ngx-slick-carousel>

In Component

afterChange(e) {
  console.log(e.slick);
}

How do I reference the slick instance like in the after change method from anywhere in my component? I tried a few ways and can't seem to get it to work. Any thoughts would be greatly appreciated.

回答1:

Template

<ngx-slick-carousel 
     class="carousel" #slickModal="slick-modal"
     #galleryOne="slick-carousel" 
     [config]="slideConfig" 
     (afterChange)="afterChange($event)">

     <div ngxSlickItem *ngFor="let slide of slides.gallery" class="slide">
        <img src="{{slide.img}}">
     </div>
</ngx-slick-carousel>

In the component use below code to do the changes

@ViewChild('slickModal') slickModal: SlickCarouselComponent;

To unslick use below code

this.slickModal.unslick();

Re initialize use below code

this.slickModal.initSlick();

Move to particular slide use below code

this.slickModal.slickGoTo(0);

来源：https://stackoverflow.com/questions/51666260/reference-slick-instance-from-component-ngx-slick-carousel

标签

angular

typescript

slick.js