Topic: How do I generate a carousel multi item dinamically with x elements per slide??(Angular 4)

Juan Letamendia free asked 4 years ago


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>

matdiy pro answered 4 years ago


Hi Juan, This was my solution:-  
<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>
  Best regards Mat

Damian Gemza staff answered 4 years ago


Dear Juan, Are you free or pro user? Multi item carousel is available only in MDB Pro version. Best Regards, Damian

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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags