jQuery & CSS3 Carousel Plugin with Content Flipping Effects - Flip Carousel

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.