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

An example of jQuery and CSS3 carousel plugin and flipping effects
An example of jQuery and CSS3 carousel plugin and flipping effects

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!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1