Powerful jQuery Plugin For Cover Flow Effect - Vanderlee Coverflow

Vanderlee Coverflow is a jQuery and jQuery UI based plugin for creating Apple Cover Flow effects with  optional mousewheel, CSS3 interpolation, keyboard interaction, transformations, touch swipe, reflections, and more.

See also:

• jQuery Based Cover Flow Photo Gallery
• Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster
• Mac-Like CSS Dock Menu with jQuery
• jQuery Mac-like Dock Menu Plugin - jqdock

How to use it:

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

<script src="/path/to/jquery-latest.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Include jQuery Vanderlee Coverflow and optional javascript libraries on your web page.

<script src="jquery.coverflow.js"></script>
<!-- Optional. CSS style interpolation. -->
<script src="jquery.interpolate.js"></script>
<!-- Optional. Mouse wheel. -->
<script src="jquery.mousewheel.js"></script>
<!-- Optional. Touch swipe. -->
<script src="jquery.touchSwipe.min.js"></script>
<!-- Optional. Reflection. -->
<script src="reflection.js"></script>

3. Add your images to the Cover Flow container.

<div id="demo-coverflow">
  <img class="cover" src="demo/1.jpg"/>
  <img class="cover" src="demo/2.jpg"/>
  <img class="cover" src="demo/3.jpg"/>
  <img class="cover" src="demo/4.jpg"/>
  <img class="cover" src="demo/5.jpg"/>
  <img class="cover" src="demo/6.jpg"/>
  ...
</div>

4. Initialize the plugin to activate the Cover Flow.

$(function() {
  if ($.fn.reflect) {
    // only possible in very specific situations
    $('#demo-coverflow .cover').reflect();
  }

  $('#demo-coverflow').coverflow({
    index:6,
    density:2,
    animateStep:function(event, cover, offset, isVisible, isMiddle, sin, cos) {
      if (isVisible) {
        if (isMiddle) {
          $(cover).css({
          'filter':'none',
          '-webkit-filter':'none'
          });
        } else {
          var brightness= 1 + Math.abs(sin),
          contrast= 1 - Math.abs(sin),
          filter= 'contrast('+contrast+') brightness('+brightness+')';
          $(cover).css({
          'filter':filter,
          '-webkit-filter':filter
          });
        }
      }
    }
  });
});

5. Available plugin options with default values.

// Triggered after the animation has stopped.
// function(event, cover, offset, isVisible, isMiddle, sin, cos)
animateComplete:  undefined,
animateStart:   undefined,

// Triggered for every animation frame. Use this event to customize how the animation looks if the default options provide insufficient control.
// function(event, cover, offset, isVisible, isMiddle, sin, cos)
animateStep:    undefined,

// todo
density:      1,

// The speed of animation. 
// "slow", "normal", "fast" 
// or an integer for time in milliseconds.
duration:'normal',

// Define an easing method for scrolling. 
// If none is specified, "swing" easing is used by default.
easing:undefined,

// true, false, 'both', 'focus', 'hover', 'none'
enableKeyboard:   'both',     

// Set to false to disable mouse button (and touch tap) interaction. 
enableClick:    true,

// Set to false to disable mouse wheel interaction. 
enableWheel:    true,

// The initial selected index.
index:0,

// An angle, in degrees, of the inner covers. 
// Negative values indicate the covers are turned inwards (towards the center). 
// Positive values indicate the covers will be turned outwards.
innerAngle:-75,

// A plain object containing CSS properties of the inner covers. 
// Leave undefined if you don't need any CSS changes. 
// You can specify all (and only) the CSS properties supported by jQuery/jQueryUI.
innerCss:undefined,

// todo
innerOffset:   100 / 3,
innerScale:     0.75,

// An angle, in degrees, of the outer covers. 
// Negative values indicate the covers are turned inwards (towards the center). 
// Positive values indicate the covers will be turned outwards.
outerAngle:-30,

// A plain object containing CSS properties of the outer covers. 
// Leave undefined if you don't need any CSS changes. 
// You can specify all (and only) the CSS properties supported by jQuery/jQueryUI.
outerCss:undefined,

// todo
outerScale:     0.25,

// A plain object containing CSS properties of the selected cover.
// Leave undefined if you don't need any CSS changes. 
// You can specify all (and only) the CSS properties supported by jQuery/jQueryUI.
selectedCss:undefined,

// 'density', 'all', NNN (exact)
visible:'density',

// todo
width:undefined,

// Whenever index is changed
change:undefined,

// Whenever clicking on the current item
confirm:undefined,

// Whenever index is set (also on init)
select:undefined

Changelog:

v1.3.5 (2026-08-04)

• Bugfixes

v1.3.4 (2017-01-17)

• Added 'before' event

v1.3.3 (2016-12-06)

• use offsetWidth due to broken outerWidth in jQuery 3+

v1.3.2 (2016-12-04)

• Changed load() fn to on() since load is deprecatedy

2016-08-07

• Fixed: Calculate maxHeight from children

2015-05-30

• Bugs fixed.

v1.1.6 (2014-11-21)

• Bugs fixed.

v1.1.0 (2014-11-19)

• Fixed: new items not picked up when added to DOM

v1.1.0 (2014-11-17)

• various fix

v1.0.4 (2013-11-24)

• Fixed negative index

v1.0.3 (2013-11-24)

• Minor performance fix
• Layout fix for FF

---

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