jQuery Coverflow inspired Slider plugin

A fun project I’m working on required the use of a jQuery Coverflow type content slider. I searched high and low for a plugin to do the job but nothing quite fit the bill so I set out to write my own. I already had a jQuery content slider plugin that I wrote about a year ago which I decided to use as my starting point. This coverflow plugin is inspired by Apple’s popular coverflow seen the iPhone, iPad, OSX - just about all their devices. When a “cover” is selected, either by clicking on it or by being navigated to with the arrows, it is centered and brought into focus. jQuery Coverflow slider DEMO HERE | GRAB THE PLUGIN ON GIT HUB The plugin, while far from a one size fits all implementation, suits my requirements perfectly and should be a good starting point to anyone wanting similar functionality.

Installation

Installation of the jQuery plugin is relatively simple… 1. Include the CSS in the head of your document:

….

2. Specify the cover images in an unordered list (ul) wrapped in a div:

*   ![](cover1.jpg)
*   ![](cover2.jpg)
*   ![](cover3.jpg)
*   ![](cover4.jpg)
*   ![](cover5.jpg)
*   ![](cover6.jpg)
*   ![](cover7.jpg)
*   ![](cover8.jpg)

3. Include jQuery and jquery.coverflow.slider.js before the closing body tag of your document.

….

4. Initialise the plugin below the inclusion of the coverflow js file

$('#contentSlider').coverFlow()

5 (optional). Options:

1
2
3
4
5
6
7
8
$('#contentSlider').coverFlow({
'initialFocus' : 0, //the index of the slide you want to be focused on load
'speed' : 200, // the speed of the animation
'addClasses' : "", //classes to add to the slider
afterChange: function(index){
console.log('Slide in focus: ' + index);
} //executes after the slide has changed
});

Feel Free to ask any questions below. I’ll try and help where I can.