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
Installation of the jQuery plugin is relatively simple…
1. Include the CSS in the head of your document:
<head> .... <link rel="stylesheet" type="text/css" href="jquery.coverflow.slider.css" /> </head> |
2. Specify the cover images in an unordered list (ul) wrapped in a div:
<div id="contentSlider"> <ul> <li><img src="cover1.jpg"></li> <li><img src="cover2.jpg"></li> <li><img src="cover3.jpg"></li> <li><img src="cover4.jpg"></li> <li><img src="cover5.jpg"></li> <li><img src="cover6.jpg"></li> <li><img src="cover7.jpg"></li> <li><img src="cover8.jpg"></li> </ul> </div> |
3. Include jQuery and jquery.coverflow.slider.js before the closing body tag of your document.
.... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="jquery.coverflow.slider.js"></script> </body> |
4. Initialise the plugin below the inclusion of the coverflow js file
$('#contentSlider').coverFlow() |
5 (optional). Options:
$('#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.