CODEWITHSUNDEEP
angularcarouselslick.js
Dmitry Grinko
Dmitry Grinko

Reputation: 15212

How to handle carousel buttons from Angular component in ngx-slick-carousel

I'm using ngx-slick-carousel to implement a slick carousel for the Angular app.

How to create the next and prev methods to switch slides from the component?

This is my 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
};

Upvotes: 4

Views: 8724

Answers (2)

Tayyab Roy
Tayyab Roy

Reputation: 513

    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();
      }

    }

Upvotes: 1

Dmitry Grinko
Dmitry Grinko

Reputation: 15212

Component:

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>

Upvotes: 9

Related Questions