Flipster is a smooth flexible and touch friendly coverflow plugin that built with CSS3 and jQuery. It uses CSS3 transition and transform for a smooth transition and 3D based look. Flipster is responsive enabled and it automatically centres and scales on mobile devices. Supports on all the latest mobile devices and browsers, it also supports a variety of predefined styles like coverflow, carousel, wheel, flat etc.

Features:

• Very flexible and easy to use.
• Supports on all modern browsers and mobile devices.
• Responsive enabled, automatically adjust on mobile devices, no extra effort is needed.
• Lightweight and easy to customize.
• Various predefined styles to choose.
• Touch, scroll wheel, trackpad and keyboard friendly.

How to use it:

1. Include the Javascript jquery.flipster.min.js at the bottom of the web page.

<script src="path/to/jquery.flipster.min.js"></script>

2. Include the CSS jquery.flipster.min.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.flipster.min.css">

3. Add the basic HTML to the page.

<div id="coverflow">
  <ul class="flip-items">
    <li><img src="path/to/images/text1.jpg"></li>
    <li><img src="path/to/images/text2.jpg"></li>
  </ul>
</div>

4. Initialize the plugin and we're ready to go.

var coverflow = $("#coverflow").flipster();

Plugin's default options:

Methods

var myFlipster = $('.my-flipster').flipster(); // It's best to store the element as a variable for easy reference.
myFlipster.flipster('next'); // Next item
myFlipster.flipster('prev'); // Previous item
myFlipster.flipster('jump', 0); // Jump to a specific index
myFlipster.flipster('jump', $('.my-item')); // Jump to a specific item
myFlipster.flipster('play'); // Resume autoplay
myFlipster.flipster('play', 5000); // Set autoplay duration
myFlipster.flipster('pause'); // Pause the autoplay until next jump
myFlipster.flipster('stop'); // Stop the autoplay entirely
myFlipster.flipster('index'); // If items are added or removed, you can tell Flipster to reindex 

Navigation

<div class="my-flipster">
    <ul>
        <li data-flip-title="Item 1 Title">...</li>
        <li data-flip-title="Item 2 Title">...</li>
        ...
    </ul>
</div>

Categories

<div class="my-flipster">
    <ul>
        <li data-flip-title="Item 1 Title" data-flip-category="Category 1">...</li>
        <li data-flip-title="Item 2 Title" data-flip-category="Category 1">...</li>
        <li data-flip-title="Item 3 Title" data-flip-category="Category 2">...</li>
        <li data-flip-title="Item 4 Title" data-flip-category="Category 2">...</li>
        <li data-flip-title="Item 5 Title">...</li>
    </ul>
</div>

<div id="coverflow">
  <ul class="flip-items">
    <li><img src="path/to/images/demo-1.jpg"></li>
    <li><img src="path/to/images/demo-2.jpg"></li>
    <li><img src="path/to/images/demo-3.jpg"></li>
    <li><img src="path/to/images/demo-4.jpg"></li>
    <li><img src="path/to/images/demo-5.jpg"></li>
  </ul>
</div>

var coverflow = $("#coverflow").flipster();

<div id="carousel">
  <ul class="flip-items">
    <li data-flip-title="Red"><img src="path/to/images/demo-1.jpg"></li>
    <li data-flip-title="Razzmatazz" data-flip-category="Purples"><img src="path/to/images/demo-2.jpg"></li>
    <li data-flip-title="Deep Lilac" data-flip-category="Purples"><img src="path/to/images/demo-3.jpg"></li>
    <li data-flip-title="Daisy Bush" data-flip-category="Purples"><img src="path/to/images/demo-4.jpg"></li>
    <li data-flip-title="Cerulean Blue" data-flip-category="Blues"><img src="path/to/images/demo-5.jpg"></li>
    <li data-flip-title="Dodger Blue" data-flip-category="Blues"><img src="path/to/images/demo-6.jpg"></li>
    <li data-flip-title="Cyan" data-flip-category="Blues"><img src="path/to/images/demo-7.jpg"></li>
    <li data-flip-title="Robin's Egg" data-flip-category="Blues"><img src="path/to/images/demo-8.jpg"></li>
    <li data-flip-title="Deep Sea" data-flip-category="Greens"><img src="path/to/images/demo-9.jpg"></li>
    <li data-flip-title="Apple" data-flip-category="Greens"><img src="path/to/images/demo-10.jpg"></li>
    <li data-flip-title="Pistachio" data-flip-category="Greens"><img src="path/to/images/demo-11.jpg"></li>
    <li data-flip-title="Pear" data-flip-category="Greens"><img src="path/to/images/demo-12.jpg"></li>
    <li data-flip-title="Bright Sun" data-flip-category="Yellows"><img src="path/to/images/demo-13.jpg"></li>
    <li data-flip-title="Mikado" data-flip-category="Yellows"><img src="path/to/images/demo-14.jpg"></li>
  </ul>
</div>

var carousel = $("#carousel").flipster({
  style: 'carousel',
  spacing: -0.5,
  nav: true,
  buttons:   true,
});

<div id="wheel">
  <ul class="flip-items">
    <li><img src="path/to/images/demo-1.jpg"></li>
    <li><img src="path/to/images/demo-2.jpg"></li>
    <li><img src="path/to/images/demo-3.jpg"></li>
    <li><img src="path/to/images/demo-4.jpg"></li>
    <li><img src="path/to/images/demo-5.jpg"></li>
  </ul>
</div>

var wheel = $("#wheel").flipster({
  style: 'wheel',
  spacing: 0
});

<div id="flat">
  <ul class="flip-items">
    <li><img src="path/to/images/demo-1.jpg"></li>
    <li><img src="path/to/images/demo-2.jpg"></li>
    <li><img src="path/to/images/demo-3.jpg"></li>
    <li><img src="path/to/images/demo-4.jpg"></li>
    <li><img src="path/to/images/demo-5.jpg"></li>
  </ul>
</div>

var flat = $("#flat").flipster({
  style: 'flat',
  spacing: -0.25
});