Flip Carousel – jQuery & CSS3 Plugin

Recently, I have been working on a new project and I wanted to use a modern carousel plugin to show some of the contents of the website I was doing. While researching for some option I can use, I found a great plugin that caught my eye. Flip Carousel is a responsive jQuery carousel plugin that uses CSS3 transitions, perspectives and transforms to flip carousel content like a card. It can be really useful if you want to add a modern touch to your website. It can be used for simple sites that sell products or to make boring content more appealing. I was thinking of using this as a way to display client list of the company website I was doing. But I guess you can think of how this Flip Carousel plugin can enhance you designs. You will probably need some customizations in styles but the solution is straightforward and simple to use so you can give it a try.

Image may be NSFW.
Clik here to view.

Have a look below how you can implement this plugin.

Step A: Link the css and js files into 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>

Step B: Create your HTML markup – Wrap contents of the carousel:

<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>
<articletitle="item6"> Item 6 </article>

Step C: Initialize the default options of the carousel:

<script>
$('article').flipcarousel();
</script>

Step D: Enhance look & functionality – some options are available if you want to use them:

<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>