jQuery & CSS3 Carousel Plugin with Content Flipping Effects - Flip Carousel
File Size: | 222 KB |
---|---|
Views Total: | 19368 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Flip Carousel is a responsive jQuery carousel plugin that has the ability to flip carousel content like a card using CSS3 transitions, transforms, and perspectives.
How to use it:
1. Include the jQuery javascript library together with JQuery flip carousel plugin's javascript and CSS files in your Html page.
<link href="flip-carousel.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="flip-carousel.js"></script>
2. Wrap the carousel contents in the Html DOM elements.
<article title="item1"> Item 1 </article> <article title="item2"> Item 2 </article> <article title="item3"> Item 3 </article> <article title="item4"> Item 4 </article> <article title="item5"> Item 5 </article> <article title="item6"> Item 6 </article>
3. Initialize the carousel with default options.
<script> $('article').flipcarousel(); </script>
4. Available options.
<script> $('article').flipcarousel({ itemsperpage : 3, // number of cards to display at once duration : 500, // flip css transition-duration property in ms randomizer : 0, // give randomness to card flip delay and duration (0 - 1) loader : false, // show loader when loading content arrows : true // arrows for previous/next navigation }); </script>
Change log:
2014-04-23
- added IE10 fallback
2014-04-22
- added ie support.
This awesome jQuery plugin is developed by herrethan. For more Advanced Usages, please check the demo page or visit the official website.