Flip Carousel – a jQuery and CSS3 carousel plugin with flipping effects

Try this jQuery and CSS3 carousel plugin, which allows us to display content as carousel with flipping effects.

jQuery and CSS3 carousel plugin, flipping effects included

jQuery Flip Carousel is an alternative to an image and content carousels. Instead of sliding or cross-fading content, it flips like a set of cards on a table. The plugin uses lots of cool CSS3 transitions and animations (no JS animations).

The solution requires jQuery 1.8+ and HTML5 Shiv for older IE.

Key features

– Randomizing more organic looking flipping

– Checking for inline images and will always pre-load one page ahead to ensure smooth flipping

– Graceful degradation for older IE version

Usage

The plugin should be invoked on a jQuery array of any like elements, not a container.

Sample HTML markup:

<article><h1>Item 1</h1><span>content</span></article>
<article><h1>Item 2</h1><span>content</span></article>
<article><h1>Item 3</h1><span>content</span></article>
<article><h1>Item 4</h1><span>content</span></article>
<article><h1>Item 5</h1><span>content</span></article>

JS call:

$('article').flipcarousel({
  loader : true,
  itemsperpage: 3,
  randomizer: 0.7
});

We can adjust the options:

– arrows

– duration

– itemsperpage

– loader

– randomizer

– pagination

License: MIT

Demo:

http://herrmedia.com/projects/flip

GitHub:

https://github.com/herrethan/flipcarousel

See also:

jQuery Carousel-3D plugin – a cross browser 3D Carousel

Touch-friendly jQuery carousel plugin – microfiche.js

Enjoy!