Rotating Cards in MDB Angular

Topic: Rotating Cards in MDB Angular

Jan Louw pro asked 6 years ago

Does MDB Angular support Rotating Cards ? I don't find it under the Components-Cards options, but there is a reference under the "Team" Sections - example 4. Regards

Jan Louw pro commented 6 years ago

OK, I've found the "Rotating Cards" under Extended features, but can't get the sample to work in my environment. I've used the Pro zip boilerplate, as I have not yet received response from mail sent on how to install Pro via npm.

Dawid Adach pro commented 6 years ago

Dear Louv, your account for npm install has been cretaed. Please check activation mail and follow 5 mins quick start guide. As per component, please attach sample code which doesn't work.

Add comment

Alberto pro answered 6 years ago

0 0 Best answer

This code works on my project. Maybe you can compare and find what the problem is in yours.

It also helps if you include code instead of just wondering if something works

<pre>Start your code here</pre>
<div>
<div><divclass="row"></div>
<div></div>
<div><div *ngFor="let teamcard of teamCards | async"class="col-lg-4 col-md-4 mb-r"></div>
<div></div>
<div><mdb-card-rotating #cards1></div>
<div></div>
<div><divclass="face front tp-box_side tp-box_front"></div>
<div></div>
<div><divclass="card-up"></div>
<div><imgsrc="/assets/images/backgrounds/{{teamcard.background}}"class="img-fluid"></div>
<div></div></div>
<div></div>
<div><divclass="avatar"><imgsrc="/assets/avatars/{{teamcard.avatar}}"class="rounded-circle img-responsive"></div>
<div></div></div>
<div></div>
<div><divclass="card-body"></div>
<div><h4>{{teamcard.name}}</h4></div>
<div><p>{{teamcard.role}}</p></div>
<div></div>
<div><aclass="rotate-btn"data-card="card-1" (click)="cards1.toggle()"><iclass="fa fa-repeat"></i> Click here to rotate</a></div>
<div></div></div>
<div></div></div>
<div></div>
<div></div>
<div><divclass="back tp-box_side tp-box_back"></div>
<div></div>
<div><h4>About me</h4></div>
<div><hr></div>
<div><p></div>
<div>{{teamcard.blurb}}</div>
<div></p></div>
<div><hr></div>
<div></div>
<div><ulclass="inline-ul"></div>
<div><li *ngFor="let socialLink of teamcard.sociallinks"></div>
<div><aclass="icons-sm fb-ic"><iclass="fa fa-facebook"></i></a></div>
<div></li></div>
<div></ul></div>
<div></div>
<div><aclass="rotate-btn"data-card="card-1" (click)="cards1.toggle()"><iclass="fa fa-undo"></i> Click here to rotate back</a></div>
<div></div></div>
<div></div>
<div></mdb-card-rotating></div>
<div></div></div>
<div></div>
<div></div></div>
</div>

Please insert min. 20 characters.

This code works on my project. Maybe you can compare and find what the problem is in yours. It also helps if you include code instead of just wondering if something works

Start your code here

<divclass="row">

<mdb-card-rotating #cards1>

<divclass="face front tp-box_side tp-box_front">

<divclass="card-up">

<imgsrc="/assets/images/backgrounds/{{teamcard.background}}"class="img-fluid">

</div>

<divclass="avatar"><imgsrc="/assets/avatars/{{teamcard.avatar}}"class="rounded-circle img-responsive">

</div>

<divclass="card-body">

<h4>{{teamcard.name}}</h4>

<p>{{teamcard.role}}</p>

<aclass="rotate-btn"data-card="card-1" (click)="cards1.toggle()"><iclass="fa fa-repeat"></i> Click here to rotate</a>

</div>

<divclass="back tp-box_side tp-box_back">

<h4>About me</h4>

<hr>

<p>

</p>

<hr>

<ulclass="inline-ul">

<aclass="icons-sm fb-ic"><iclass="fa fa-facebook"></i></a>

</li>

</ul>

<aclass="rotate-btn"data-card="card-1" (click)="cards1.toggle()"><iclass="fa fa-undo"></i> Click here to rotate back</a>

</div>

</mdb-card-rotating>

</div>

</div>

Jan Louw pro commented 6 years ago

Hi Alberto, Thanks you for your assistance - I've rebuild Docker image to the version of -cli as per Quick start, and it works for me now. Regards

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Jan Louw

Pro User 118Support score
24Questions 3Answers 0Snippets