Topic: wrong flip card
when copying the first rotate card (see: https://mdbootstrap.com/components/flipping-cards/) and use the code of the first one i get a card but there are two problems first of all its nothing like it second it does not rotate it is in fact the basic non rotateble card
i need a card like that for space when trying the second card it does not rotate back
Hi,
Firstly - what version of MDB are you using? If you are using 4.5 then that code should work fine (there are a few styling issues). I can see what you mean with the code being incorrect. You can also find the code here: https://mdbootstrap.com/sections/team-sections/ (version 4)
Code should look like this:
<!--Rotating card--> <div class="card-wrapper"> <div id="card-1" class="card-rotating effect__click text-center w-100 h-100"> <!--Front Side--> <div class="face front"> <!-- Image--> <div class="card-up"> <img src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" alt="Team member card image"> </div> <!--Avatar--> <div class="avatar mx-auto white"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg" class="rounded-circle img-fluid" alt="First sample avatar image"> </div> <!--Content--> <div class="card-body"> <h4 class="mt-1">Maria Kate</h4> <p class="font-weight-bold dark-grey-text">Photographer</p> <!--Triggering button--> <a class="rotate-btn grey-text" data-card="card-1"> <i class="fa fa-repeat grey-text"></i> Click here to rotate</a> </div> </div> <!--Front Side--> <!--Back Side--> <div class="face back"> <!--Content--> <div class="card-body"> <!--Content--> <h4 class="font-weight-bold mt-4 mb-2"> <strong>About me</strong> </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="list-inline list-unstyled"> <li class="list-inline-item"> <a class="icons-sm fb-ic"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="icons-sm pin-ic"> <i class="fa fa-pinterest"> </i> </a> </li> <li class="list-inline-item"> <a class="icons-sm ins-ic"> <i class="fa fa-instagram"> </i> </a> </li> <li class="list-inline-item"> <a class="icons-sm tw-ic"> <i class="fa fa-twitter"> </i> </a> </li> </ul> <!--Triggering button--> <a class="rotate-btn grey-text" data-card="card-1"> <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a> </div> </div> <!--Back Side--> </div> </div> <!--Rotating card-->If you are using anything below 4.5 use this url: https://mdbootstrap.com/legacy/jquery/4.4.5/?page=sections/team since they did some major code enhancements.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Arturo Macías pro premium priority commented 7 years ago
I'm having the same issue.. my fliping cards stop working after upgrading to v4.5.0. First piece of code is not the code for the example just below, and neither works...