Topic: Carousel next and prev

itay pro asked 4 years ago

How do you get the handle of a Carousel element in order to use previousSlide() and nextSlide() methods ?

Konrad Stępień staff answered 4 years ago

Try my code:

add #carousel to your HTML and button with functions.

<mdb-carousel #carousel [isControls]="false" [animation]="'slide'">
    <img class="d-block w-100" src="" alt="First slide">
    <img class="d-block w-100" src="" alt="Second slide">
    <img class="d-block w-100" src="" alt="Third slide">

<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';

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

  next() {
  prev() {

We will add this example for our documentation page.

Best, Konrad.

itay pro commented 4 years ago


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: Yes
  • Provided link: No