Multi-item carousel, reduce space between small sized cards

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,

space between the cards is too wide
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); }

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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">

<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></pre>
</div>
.SCSS:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">.carousel-multi-item .carousel-inner .carousel-item.active,

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

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

display: flex;

}</pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

She Jong Shon

Pro User 20Support score
4Questions 0Answers 0Snippets