Multi-item carousel, reduce space between small sized cards

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Multi-item carousel, reduce space between small sized cards

She Jong Shon pro asked 6 years ago

In multi-item mdb-carousel, each mdb-card's max width is 220px and I want to show 5 cards per slide showing in a single line. Currently,
  1. space between the cards is too wide
  2. three cards are placed in a single line, but the rest of two cards are pushed to the bottom.
So how to reduce space between the cards and show all 5 in a single line? .html 
<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'"

[animation]="'slide'"[(activeSlideIndex)]="activeSlideIndex"(activeSlideChange)="activeSlideChange($event)">

  <mdb-carousel-item *ngFor="let item of slides; let i = index">

    <div class="col-md-4" *ngFor="let card of item">

      <mdb-card style="max-width: 220px;">

        <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="#" mdbBtncolor="primary" class="waves-light" mdbWavesEffect>{{card.buttonText}}</a>

        </mdb-card-body>

      </mdb-card>

    </div>

  </mdb-carousel-item>

</mdb-carousel>
.ts
cards = [ { title:'Card Title 1', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 2', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 3', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 4', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 5', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 6', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 7', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 8', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', buttonText:'Button', img:'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg' }, { title:'Card Title 9', description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus totam hic similique vero architecto reprehenderit consequatur cum', 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, 5); }

Damian Gemza staff answered 6 years ago

Dear She Jong Shon, The 5 cards would be difficult to achieve, because as you know, Bootstrap uses 12 cols grid. So how you can divide 12 by 5 to get the desired value of your columns? Here's the code for 6 cards in one slide: .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-2" *ngFor="let card of item">

<mdb-card>

<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><ahref="#"mdbBtncolor="primary"class="waves-light"mdbWavesEffect>{{card.buttonText}}</a>

</mdb-card-body>

</mdb-card>

</div>

</mdb-carousel-item>

</mdb-carousel>
.SCSS: 
.carousel-multi-item .carousel-inner .carousel-item.active,

.carousel-multi-item .carousel-item-next,

.carousel-multi-item .carousel-item-prev {

display: flex;

}
Best Regards, Damian

She Jong Shon pro commented 6 years ago

Thank you that solved it.
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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: web
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: Yes
  • Provided link: No
Tags
carousels
Related topics
0
Multi-Item Carousel - you are hiding 2/3rd of the items on small screens... !
0
MDB Bootstrap Support
0
Add Testimonials v.2 MDB pro v.4.88 to MDB pro v.4.55
0
I need help with bootstrap Carousel
About author
She Jong Shon
Pro User
20Support score
4Questions 0Answers
0Snippets likes 0Snippets