Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster

Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster
File Size: 76.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

flipster is an amazing and touch-enabled jquery plugin that allows you to create an image Cover Flow effect with CSS3 3D transform and flipping effects.

It will fall back to be flat and boring in those browsers which don't support CSS3 3D transform, like IE7, IE8, IE9.

You may also like:


$ npm install jquery.flipster --save

How to use it :

1. Include the latest jQuery library and flipster on your web page

<script src=""></script>
<script src="./jquery.flipster.js"></script>

2. The necessary CSS.

.flipster {
  overflow: hidden;
  width: 100%;
  display: none;

.flipster > ul {
  padding-top: 2.5%;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 333ms;
  -moz-transition: all 333ms;
  transition: all 333ms;
  position: relative;
  height: 1000px;

.flipster li {
  display: block;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  position: absolute;
  width: 20%;
  opacity: 0.99; /* fix for strange clipping behavior on rotated elements in chrome. don't know why this works */

.flipster li img {
  width: 100%;
  display: block;

.flipster li > div {
  -webkit-transition: all 500ms;
  -ms-transition: all 500ms;
  transition: all 500ms;
  background-color: #000000;
  -webkit-box-shadow: 0px 0px 5% #000000;
  -moz-box-shadow: 0px 0px 5% #000000;
  -ms-box-shadow: 0px 0px 5% #000000;
  box-shadow: 0px 0px 15px #000000;
  -webkit-box-reflect: below 1px -webkit-gradient( linear, left bottom, left top, color-stop(0.10, rgba(255,255,255,0.3)), color-stop(0.50, transparent));
  width: 100%;

.no-transition {
  -webkit-transition: all 0ms !important;
  -moz-transition: all 0ms !important;
  transition: all 0ms !important;

.flipster .flipster-left > div {
  -webkit-transform: rotateY(60deg);
  -moz-transform: rotateY(60deg);
  -ms-transform: rotateY(60deg);
  transform: rotateY(60deg);

.flipster .flipster-right > div {
  -webkit-transform: rotateY(-60deg);
  -moz-transform: rotateY(-60deg);
  transform: rotateY(-60deg);
  -ms-transform: rotateY(-60deg);

.flipster .flipster-current>div {
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 150px);
  -moz-transform: rotateY(0deg) translate3d(0, 0, 150px);
  -ms-transform: rotateY(0deg) translate3d(0, 0, 150px);
  transform: rotateY(0deg) translate3d(0, 0, 150px);

/* Old browser compatibility classes */

.compatibility { }

3. The HTML

<div class="coverflow">
<div> <img src=""> </div>
<div> <img src=""> </div>

4. Call the plugin with default options.

$(document).ready( function() {

5. Available options and callbacks.


  // Container for the flippin' items.
  itemContainer:    'ul', 

  // Selector for children of itemContainer to flip
  itemSelector:     'li', 

  // Switch between 'coverflow' or 'carousel' display styles

  // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.

  // Fading speed
  fadeIn: 400,

  // Infinite loop
  loop: false,

  // Enable autoplay
  autoplay: false,

  // Enable pause on hover
  pauseOnHover: true,

  // Space between items
  spacing: -0.6,

  // Switch between items with click
  click: true,

  // Enable left/right arrow navigation
  keyboard:   true, 

  // Enable scrollwheel navigation (up = left, down = right)
  scrollwheel: true, 

  // Enable swipe navigation for touch devices
  touch:      true, 

  // If true, flipster will insert an unordered list of the slides
  nav:        false, 

  // If true, flipster will insert Previous / Next buttons
  buttons: false, 

  // Changes the text for the Previous button
  buttonPrev:         'Previous',       

  // Changes the text for the Next button
  buttonNext:         'next'

  // Callback function when items are switches
  onItemSwitch:     $.noop


6. API methods.

// goto next

// back to previous

// goto a specific index
instance.flipster('jump', 0);

// goto a specific item
instance.flipster('jump', $('.my-item'));

// resume autoplay

// autoplay duration
instance.flipster('play', 5000); 

// pause autoplay

// stop autoplay

// re-index


1.1.4 (2019-05-02)

  • Ensuring latest build files made it to npm.

1.1.3 (2017-11-10)

  • Modification to touch and wheel events and loop

1.1.1 (2017-07-29)

  • mouse wheel fix for Mozilla Firefox

1.1.0 (2016-03-04)

  • Fix for maximum callstack errors when not visible.

1.0.1 (2015-11-03)

  • Fixed a bug where the navigation children have incorrect active class

1.0.0 (2015-10-24)

  • added namespace to window resize event
  • Wheel theme fix

0.3.4 (2014-07-24)

  • Some additional options available
  • Cleaned up code and normalized whitespace
  • Added Grunt support for minifying css and js for distribution

0.3.1 (2013-07-28)

  • Added new Carousel style! Shows 5 items at a time in a looping carousel
  • Added itemContainer, itemSelector, style, and start options for basic configuration
  • Added enableKeyboard, enableMousewheel, and enableTouch options to enable/disable features
  • Added enableNav and enableNavButtons options to insert controls into the container
  • Added onItemSwitch callback
  • Better demos

0.2.0 (2013-06-28)

  • Added automatic height adjustment for the container element, which used to just overflow.
  • A few minor code improvements.
  • Added minified versions of the js and css files.

This awesome jQuery plugin is developed by drien. For more Advanced Usages, please check the demo page or visit the official website.