Topic: How do I generate a carousel multi item dinamically with x elements per slide??(Angular 4)
Hey I would like to display an array of elements which is length is variable, 3 per slide with the carousel-multi-item element. Is there any directive or something to achieve this??. The example shows this but it's static:
Start your code here <mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'" [animation]="'slide'"> <!--First slide--> <mdb-slide> <div class="col-md-4"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> </mdb-slide> <!--/First slide--> <!--Second slide--> <mdb-slide> <div class="col-md-4"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> </mdb-slide> <!--/Second slide--> <!--Third slide--> <mdb-slide> <div class="col-md-4"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card"> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a> </div> </div> </div> </mdb-slide> <!--/Third slide--> </mdb-carousel>
Add comment
Dear Juan,
Are you free or pro user? Multi item carousel is available only in MDB Pro version.
Best Regards,
Damian
Hi Juan,
This was my solution:-
Best regards
Mat
<mdb-carousel [isControls]="true" [keyboard]="true" class="carousel-multi-item multi-animation col-xl-12 col-lg-12 col-md-12 col-sm-12"
[type]="'carousel-multi-item'" [animation]="'slide'" [interval]="10000">
<div class="col-md-12 col-sm-12" *ngFor="let item of items; let i = index">
<mdb-slide class="col-xl-12 col-lg-12 col-md-12 col-sm-12" *ngIf=" i % 3 === 0 ">
<div class="col-md-4" *ngFor="let item of items.slice(i,i+3)">
<div class="card">
<img class="img-fluid" src="{{ Card image src }}" alt="{{ Card image alt}}">
<div class="card-body">
<h4 class="card-title">{{ Card title }}</h4>
<p>{{ Card paragraph}}</p>
<a href="#" class="btn btn-primary waves-light" mdbRippleRadius>{{ Card link text }}</a>
</div>
</div>
</div>
</mdb-slide>
</div>
</mdb-carousel>
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: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No