How do I generate a carousel multi item dinamically with x e

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

Juan Letamendia free asked 6 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>

Add comment

matdiy pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Damian Gemza staff answered 6 years ago