1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: multi-item responsive carousel last item squished

xhuang free asked 4 years ago

Multi-item responsive carousel, total items mod chunksize > 0, e.g. 10 items for 3 item slide

Expected behavior: The last item takes 1/3 of the page's width as other slides

Actual behavior: The last item takes 1/6 of the page's width

Resources (screenshots, code snippets etc.): I took the sample code, and added 1 more item, please see the screenshot of the last slide enter image description here

enter image description here

Konrad Stępień staff commented 4 years ago

Hi @xhuang,

Could you send me part of your code?

I can't restore this issue in my project.

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',
  },
  {
    title: 'Card Title 10',
    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, 3);
}

And 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="col-md-4" *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>
  </mdb-carousel-item>
</mdb-carousel>

example

xhuang free commented 4 years ago

It's copied from ‘Multi-item carousel responsive' code (https://mdbootstrap.com/docs/angular/advanced/carousel/), when *ngSwitchCase="'multiple'

TS:

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

@Component({
  selector: 'multi-item-carousel',
  templateUrl: './multi-item-carousel.component.html',
  styleUrls: ['./multi-item-carousel.component.scss'],
})
export class MultiItemCarouselComponent implements OnInit {
  CAROUSEL_BREAKPOINT = 768;
  carouselDisplayMode = 'multiple';

  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'
    },
{
      title: 'Card Title 10',
      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, chunkSize) {
    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, 3);

    if (window.innerWidth <= this.CAROUSEL_BREAKPOINT) {
      this.carouselDisplayMode = 'single';
    } else {
      this.carouselDisplayMode = 'multiple';
    }
  }

  @HostListener('window:resize')
  onWindowResize() {
    if (window.innerWidth <= this.CAROUSEL_BREAKPOINT) {
      this.carouselDisplayMode = 'single';
    } else {
      this.carouselDisplayMode = 'multiple';
    }
  }
}

HTML:

<mdb-carousel [animation]="'slide'" [ngSwitch]="carouselDisplayMode" [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'">
  <ng-container *ngSwitchCase="'single'">
    <mdb-carousel-item *ngFor="let card of cards">
      <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>
    </mdb-carousel-item>
  </ng-container>

  <ng-container *ngSwitchCase="'multiple'">
    <mdb-carousel-item *ngFor="let item of slides; let i = index">
      <div class="col-md-4" *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>
    </mdb-carousel-item>
  </ng-container>
</mdb-carousel>

Konrad Stępień staff commented 4 years ago

Hi @xhuang,

Still without bug like yours. Could you make me a NEW project on Github?

Also, your buttons have other styles than mine. I think, your styles override styles from MDB and that's why you have this issue.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: Windows 10
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
carousel
About author
xhuang
15Support score
4Questions 0Answers 5Snippets