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. 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 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
5 (optional). Options:
'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
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.