Multi item carousel gallery HTML code


Topic: Multi item carousel gallery HTML code

sameretto asked 6 years ago

the code for Multi-item carousel gallery does not match what's being displayed. Am I missing something? I want to use that piece because it has 4 cards that span the screen.

here is the source: https://mdbootstrap.com/docs/angular/advanced/gallery/


Damian Gemza staff answered 6 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: computer
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes