Multi-item Carousel 4 or more items

Dear Comunicaciones,

Please use the below code in your application:

.html:

<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'"
                  [animation]="'slide'">
      <mdb-carousel-item *ngFor="let item of slides; let i = index">
        <div class="row">
          <div class="col-md-3" [ngClass]="{'d-none d-md-block': cardIndex !== 0}"
               *ngFor="let card of item; let cardIndex = index">
            <mdb-card class="my-1">
              <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
              <mdb-card-body>
                <mdb-card-title>
                  <h4>{{card.title}}</h4>
                </mdb-card-title>
                <p>{{card.description}}</p>
                <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>{{card.buttonText}}</a>
              </mdb-card-body>
            </mdb-card>
          </div>
        </div>
      </mdb-carousel-item>
    </mdb-carousel>

.ts:

cards = [
    {
      title: 'Card Title 1',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 2',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 3',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 4',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 5',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 6',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 7',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 8',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 9',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
  ];
  slides: any = [[]];
  chunk(arr: any, chunkSize: any) {
    let R = [];
    for (let i = 0, len = arr.length; i < len; i += chunkSize) {
      R.push(arr.slice(i, i + chunkSize));
    }
    return R;
  }
  ngOnInit() {
    this.slides = this.chunk(this.cards, 4);
  }

The above code is almost the same as our multi item carousel documentation - what I have changed: changed the chunkSize from 3 to 4 in .ts file, and changed .col-md-4 to .col-md-3 in .html file, and wrapper this col with a div with class row.

Best Regards,

Damian

Thanks for your help Damian,

¿How can I remove the self-animation from the carousel?

About which self-animation are you talking about? Do you want to remove the animation, or remove the automatically changing the slides?

If you want to remove the whole animation - please remove the [animation] input from the mdb-carousel element.

If you want to turn off the auto changing the slides - please add the [interval]=" '0' " input to the mdb-carousel element.

Best Regards,

Damian

Thanks for the code Damian.Do you have any suggestion on how to make it responsive?