issue while using ngx-slick-carousel, How to handile next and prev button

Question

next and prev button is working properly.But its not visible.. when i am inspecting, i can see the next and prev button.how can i make it visible ?

here is my code

ts:Carousalcomponent.ts

html:Carousalcomponent.html

css:Carousalcomponent.css

output:output

Answer 1

you can try with this example :

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

}