Flipping Cards Carousel
Configuration
ms
px
px px
ms
Rotation mode:
ms
px px
ms
Rotation mode:
ms
How to use
Example of usage with pure JavaScript
<link href="css/flipping.css" rel="stylesheet"/> <link href="css/card.css" rel="stylesheet"/> <script src="js/flipping.js"/> ... <div id="flipping_cards_carousel" class="flipping"> <div class="btn-backward"></div> <div class="cards"> <div>Content of card 1</div> <div>Content of card 2</div> <div>Content of card 3</div> ... </div> <div class="btn-forward"></div> </div> <script> var configuration = { autoFlipMode: false, autoFlipDelay: 1500, pauseMouseOver: true, cardsShadow: true, buttonsShadow: true, transitionDuration: 700, rotationMode: "simultaneous", sequentialDelay: 600, cardWidth: 150, cardHeight: 180, spacingHorizontal: 15, spacingVertical: 15, cardsToShow: 3, cardsPerRow: 3, startFromIndex: 1 }; flipping.init('flipping_cards_carousel', configuration); </script>