Carousel next and prev

Try my code:

add #carousel to your HTML and button with functions.

<mdb-carousel #carousel [isControls]="false" [animation]="'slide'">
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
  </mdb-carousel-item>
</mdb-carousel>

<button type="button" mdbBtn color="primary" mdbWavesEffect (click)="prev()">Prev</button>
<button type="button" mdbBtn color="primary" mdbWavesEffect (click)="next()">Next</button>

and then use @ViewChild in TS file:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('carousel', {static: false}) carousel: any;


  next() {
    this.carousel.nextSlide();
  }
  prev() {
    this.carousel.previousSlide();
  }
}

We will add this example for our documentation page.

Best, Konrad.