Multi item carousel gallery HTML code

Dear sameretto,

Thanks for your report! We'll definitely resolve this problem.

Until corrections, please use the below workaround:

.html:

<!--Carousel Wrapper-->
<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'"
              [animation]="'slide'">
  <!--First slide-->
  <mdb-carousel-item>
    <div class="row">
      <div class="col-md-3">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
    </div>
  </mdb-carousel-item>
  <!--/First slide-->
  <!--Second slide-->
  <mdb-carousel-item>
    <div class="row">
      <div class="col-md-3 pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
    </div>
  </mdb-carousel-item>
  <!--/Second slide-->
  <!--Third slide-->
  <mdb-carousel-item>
    <div class="row">
      <div class="col-md-3 pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
      <div class="col-md-3 clearfix d-none d-md-block pb-1">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"
             class="img-fluid">
      </div>
    </div>
  </mdb-carousel-item>
  <!--/Third slide-->
</mdb-carousel>
<!--/.Carousel Wrapper-->

.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    const buttons = document.querySelectorAll('.btn-floating');
    buttons.forEach((el: any) => {
      this.renderer.removeClass(el, 'btn-floating');
      this.renderer.addClass(el, 'px-3');
      this.renderer.addClass(el.firstElementChild, 'fa-3x');
    });
  }
}

.scss:

.carousel-indicators {
  display: none;
}

Best Regards,

Damian