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:

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

Did you like this post? Why not subscribe?

Leave a Reply

Your email address will not be published. Required fields are marked *