How to control Ngb bootstrap carousel slide by button in Angular

Question

I have a scenario like this:

• Display Ngb Bootstrap carousel and control the slide images by two buttons: Previous and Next.
• When Previous button was clicked then show previous slide image and Next button was clicked then show next slide image.
• Unfortunately, my code doesn't work. Someone can help me. Below are my code:

1. HTML code:

<div class="wrapper-md">
    <div class="modal-header">
        <h5 class="modal-title">TITLE HERE</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ngb-carousel #carousel *ngIf="images" [showNavigationArrows]="false" [showNavigationIndicators]="false"  [keyboard]="false">
            <ng-template ngbSlide *ngFor="let image of images; index as i">
                <div class="picsum-img-wrapper">
                    <img [src]="image" alt="Guide image">
                </div>
                <div class="carousel-caption">
                    <h4>Slide {{i}}</h4>
                </div>
            </ng-template>
        </ngb-carousel>
    </div>
    <div class="row justify-content-center">
        <button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
        <button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
        <button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
    </div>
</div>

2. TypeScript code:

    images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/900/500`);

    @ViewChild('carousel', {static: true}) carousel: NgbCarousel;

    isPrevious: boolean = false;
    isNext: boolean = false;

    constructor(public modal: NgbActiveModal){

    }

    skip()
    {
        this.modal.close();
    }

    previousStep()
    {
        this.isPrevious = true;
        this.carousel.prev();
    }

    nextStep()
    {
        this.isNext = true;
        this.carousel.next();

    }

Any idea in my case. Thank in advance!

Answer 1

Remove [showNavigationArrows]="false" this attribute explain---if youuse ngb-carousal this attribue is false then your next and pre event is not work by default it is true and inside ngb-carouse you can use next and pre button

    <div class="wrapper-md">
    <div class="modal-header">
        <h5 class="modal-title">TITLE HERE</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ngb-carousel #carousel *ngIf="images" [showNavigationIndicators]="false"  [keyboard]="false">
            <ng-template ngbSlide *ngFor="let image of images; index as i">
                <div class="picsum-img-wrapper">
                    <img [src]="image" alt="Guide image">
                </div>
                <div class="carousel-caption">
                    <h4>Slide {{i}}</h4>
                </div>
            </ng-template>
 <div class="row justify-content-center">
        <button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
        <button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
        <button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
    </div>
</div>
        </ngb-carousel>`
    </div>