jQuery 3D Carousel

Download

Why another carousel plug-in?

After lots of digging and research, all the plug-ins we could find only support images. With the need to have any HTML we wanted spinning happily in the carousel, we created our own plug-in.

Examples & Sample Code

Sample 1

.

The HTML for the above is rather simple, and works like other jQuery plug-ins. This is the most simple usage of this plug-in, with little to no options defined.

<div id="carousel01" style="height:200px;">
	<div>
	Some Text for the first item
	</div>
	<div>
	Some Text for the second item
	</div>
</div>
			

Example java script, with all options defined.

$('#carousel01').carousel({
	frameRate: 25,
	rotationsPerSecond: 0.1,
	inertia: 0.5
});
			

Sample 2

This is the most "complex" verison of the plug-in. All options are included in this example.

.
<div id="carousel02" style="height:200px;">
	<div style="width:150px;height:100px;background-color:#fff;color:#000;">
		Some Text for the first item
	</div>
		
	<div>
		Some Text for the second item.
	</div>
		
	<div>
		Third item, with an icon<br /><img src="http://www.southside-studios.com/images/icon-web-updates.png" />
	</div>
	
</div>

	<p style="text-align:center">
	<input type="button" value="Other way..." id="lbut" />
	</p>
		

Options, again.

$('#carousel02').carousel({
	action: 'start',
	frameRate: 25,
	rotationsPerSecond: 0.1,
	inertia: 0.5,
	zCenter: 1000,
	zRadius: 1000,
	leftButton: $('#lbut'),
	rightBUtton: $('#rbut'),
	ignore: null
});
		

Credits

Thanks to Tutorialzine's post "Animated Sharing Bar With jQuery & CSS" for providing the inspiration and a reference point.