Multi-item carousel with *ngFor

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Multi-item carousel with *ngFor

She Jong Shon pro asked 6 years ago

How do I *ngFor mdb-card properly using carousel? Data is being called from the database, so the number of mdb-cards is dynamic. For example, if I have 12 mdb-cards to show in carousel, how do I do this in code? Also, how can I show 5 multi-item (mdb-card) per carousel? 
<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'" [animation]="'slide'"> 

    <mdb-carousel-item>

      <div class="col-md-4" *ngFor="let v of videos">

        <mdb-card>        

          <mdb-card-body>

            <mdb-card-title>

              <h4>{{v.title}}</h4>

            </mdb-card-title>

            <p>{{v.content}}</p>

          </mdb-card-body>

        </mdb-card>

      </div>    

    </mdb-carousel-item>

</mdb-carousel>

Damian Gemza staff answered 6 years ago

Dear She Jong Shon, You have to use 2 *ngFor loops. The first one for creating mdb-carousel-item, and the second one to fill it with mdb-card elements. Please take a look at my code: .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>

<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, 3);

}
Best Regards, Damian

She Jong Shon pro commented 6 years ago

Thanks, that worked perfectly. But as your example changes slides automatically, it creates error: ERROR TypeError: _co.activeSlideChange is not a function

Arkadiusz Idzikowski staff commented 6 years ago

Dear She Jong Shon,

Please remove this line from mdb-carousel: 

[(activeSlideIndex)]="activeSlideIndex" (activeSlideChange)="activeSlideChange($event)

Regards,

Arek
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: No
  • Provided link: No
Tags
carousel
Related topics
1
Page scrolling by touch is not working with carousels
1
buttons on carousel are not clickable by touch
1
Remove Nav Fade in Carousel
1
Carousel with cross-fade using *ngFor
1
Carousel ignoring data-mdb-interval="false"
About author
She Jong Shon
Pro User
20Support score
4Questions 0Answers
0Snippets likes 0Snippets