Powerful jQuery Plugin For Cover Flow Effect - Vanderlee Coverflow

Vanderlee Coverflow is a jQuery and jQuery 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 jQuery library and jQuery UI library on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/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. The html

<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. The javascript

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

$('#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
});
}
}
}
});
});
</script>

5. 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

6. Public methods.

Change logs:

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.