No Support or assistance from MDB as a Pro member

MDB SupportCategory: MDB AngularNo Support or assistance from MDB as a Pro member
frazer@technology.design Pro User asked 3 months ago in MDB pro, version:5.2.1

How do we get Pro support?

I have emailed in a question and have received NO support – we are blocked and have PRO membership!

frazer@technology.design Pro User replied 3 months ago

we’re simply trying to replicate the example highlighted on the mdb website:

frazer@technology.design Pro User replied 3 months ago

– MDB Pro Version: 5.2.1
– Angular version: 5.2.3
– Angular CLI: 1.7.2
– Typescript: 2.4.2

2 Answers
frazer@technology.design Pro User answered 3 months ago
<mdb-card-rotating #cards1>
 <!--Front Side-->
 <div class="face front tp-box_side tp-box_front">
 
 <!-- Image-->
 <div class="card-up">
 <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid">
 </div>
 <!--Avatar-->
 <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg" class="rounded-circle img-responsive">
 </div>
 <!--Content-->
 <div class="card-body">
 <h4>Maria Kate</h4>
 <p>Photographer</p>
 <!--Triggering button-->
 <a class="rotate-btn" data-card="card-1" (click)="cards1.toggle()"><i class="fa fa-repeat"></i> Click here to rotate</a>
 </div>
 </div>
 <!--/.Front Side-->
 
 <!--Back Side-->
 <div class="back tp-box_side tp-box_back">
 
 <!--Content-->
 <h4>About me</h4>
 <hr>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
 <hr>
 <!--Social Icons-->
 <ul class="inline-ul">
 <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
 <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"></i></a></li>
 <li><a class="icons-sm ins-ic"><i class="fa fa-instagram"></i></a></li>
 <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
 </ul>
 <!--Triggering button-->
 <a class="rotate-btn" data-card="card-1" (click)="cards1.toggle()"><i class="fa fa-undo"></i> Click here to rotate back</a>
 
 </div>
 <!--/.Back Side-->
 </mdb-card-rotating>
Damian Gemza answered 3 months ago

Dear Frazer, my apologies for your inconvenience. Our support is working on daily basis (Mon-Fri from 9:00 – 18:00 GMT+1) . Please remember that our main support channel is this forum therefore other channels like mails might be omitted as or take more time to resolve as all tickets should be registered using this support forum.

About your case: Don’t know exactly which problem you’ve encountered, but this code shows 3 rotating cards which you can rotate by clicking on each card. As i told you in other ticket, if you’ve got few rotating cards, you have to provide them unique id like #cards1, #cards2, #cards3, and change (click) methods for this card like cards1.toggle(), cards2.toggle() and other.

Please copy this code and let me know if this solve your problem, or not.

<div class="row">

<div class="col-md-3 mx-auto my-5">

<mdb-card-rotating #cards1>

<!--Front Side-->

<div class="face front tp-box_side tp-box_front">

<!-- Image-->

<div class="card-up">

<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg"class="img-fluid">

</div>

<!--Avatar-->

<div class="avatar">

<img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg"class="rounded-circle img-responsive">

</div>

<!--Content-->

<div class="card-body">

<h4>Maria Kate</h4>

<p>Photographer</p>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-1" (click)="cards1.toggle()">

<i class="fa fa-repeat"></i> Click here to rotate</a>

</div>

</div>

<!--/.Front Side-->

<!--Back Side-->

<div class="back tp-box_side tp-box_back">

<!--Content-->

<h4>About me</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,

dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>

<hr>

<!--Social Icons-->

<ul class="inline-ul">

<li>

<a class="icons-sm fb-ic">

<i class="fa fa-facebook"></i>

</a>

</li>

<li>

<a class="icons-sm pin-ic">

<i class="fa fa-pinterest"></i>

</a>

</li>

<li>

<a class="icons-sm ins-ic">

<i class="fa fa-instagram"></i>

</a>

</li>

<li>

<a class="icons-sm tw-ic">

<i class="fa fa-twitter"></i>

</a>

</li>

</ul>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-1" (click)="cards1.toggle()">

<i class="fa fa-undo"></i> Click here to rotate back</a>

</div>

<!--/.Back Side-->

</mdb-card-rotating>

</div>

<div class="col-md-3 mx-auto my-5">

<mdb-card-rotating #cards2>

<!--Front Side-->

<div class="face front tp-box_side tp-box_front">

<!-- Image-->

<div class="card-up">

<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg"class="img-fluid">

</div>

<!--Avatar-->

<div class="avatar">

<img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg"class="rounded-circle img-responsive">

</div>

<!--Content-->

<div class="card-body">

<h4>Maria Kate</h4>

<p>Photographer</p>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-2" (click)="cards2.toggle()">

<i class="fa fa-repeat"></i> Click here to rotate</a>

</div>

</div>

<!--/.Front Side-->

<!--Back Side-->

<div class="back tp-box_side tp-box_back">

<!--Content-->

<h4>About me</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,

dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>

<hr>

<!--Social Icons-->

<ul class="inline-ul">

<li>

<a class="icons-sm fb-ic">

<i class="fa fa-facebook"></i>

</a>

</li>

<li>

<a class="icons-sm pin-ic">

<i class="fa fa-pinterest"></i>

</a>

</li>

<li>

<a class="icons-sm ins-ic">

<i class="fa fa-instagram"></i>

</a>

</li>

<li>

<a class="icons-sm tw-ic">

<i class="fa fa-twitter"></i>

</a>

</li>

</ul>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-2" (click)="cards2.toggle()">

<i class="fa fa-undo"></i> Click here to rotate back</a>

</div>

<!--/.Back Side-->

</mdb-card-rotating>

</div>

<div class="col-md-3 mx-auto my-5">

<mdb-card-rotating #cards3>

<!--Front Side-->

<div class="face front tp-box_side tp-box_front">

<!-- Image-->

<div class="card-up">

<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg"class="img-fluid">

</div>

<!--Avatar-->

<div class="avatar">

<img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg"class="rounded-circle img-responsive">

</div>

<!--Content-->

<div class="card-body">

<h4>Maria Kate</h4>

<p>Photographer</p>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-3" (click)="cards3.toggle()">

<i class="fa fa-repeat"></i> Click here to rotate</a>

</div>

</div>

<!--/.Front Side-->

<!--Back Side-->

<div class="back tp-box_side tp-box_back">

<!--Content-->

<h4>About me</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,

dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>

<hr>

<!--Social Icons-->

<ul class="inline-ul">

<li>

<a class="icons-sm fb-ic">

<i class="fa fa-facebook"></i>

</a>

</li>

<li>

<a class="icons-sm pin-ic">

<i class="fa fa-pinterest"></i>

</a>

</li>

<li>

<a class="icons-sm ins-ic">

<i class="fa fa-instagram"></i>

</a>

</li>

<li>

<a class="icons-sm tw-ic">

<i class="fa fa-twitter"></i>

</a>

</li>

</ul>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-3" (click)="cards3.toggle()">

<i class="fa fa-undo"></i> Click here to rotate back</a>

</div>

<!--/.Back Side-->

</mdb-card-rotating>

</div>

</div>

Best Regards,

Damian