Interface elements for jQuery - Documentation - Carousel

3D Carousel

Created a 3D Carousel from a list of images, with reflections and animated by mouse position.

example

Options:

items String mandatory items selection
itemWidth Integer mandatory the max width for each item
itemHeight Integer mandatory the max height for each item
itemMinWidth Integer mandatory the minimum width for each item, the height is automaticaly calculated to keep proportions
rotationSpeed Float mandatory the speed for rotation animation
reflectionSize Float mandatory the reflection size a fraction from items' height
slowOnHover Boolean optional if true the rotation speed slows down when an item is hovered
slowOnOut Boolean optional it true the rotation speed slows down when the cursor leaves the carousel

Code sample:

SCRIPTS
window.onload = 
	function()
	{
		$('#carousel').Carousel(
			{
				itemWidth: 110,
				itemHeight: 62,
				itemMinWidth: 50,
				items: 'a',
				reflections: .5,
				rotationSpeed: 1.8
			}
		);
	}
HTML
	<div id="carousel">
		<a href="" title=""><img src="" width="100%" /></a>
		<a href="" title=""><img src="" width="100%" /></a>
		<a href="" title=""><img src="" width="100%" /></a>
		<a href="" title=""><img src="" width="100%" /></a>
		<a href="" title=""><img src="" width="100%" /></a>
	</div>
CSS
	#carousel
	{
		width: 700px;
		height: 150px;
		background-color: #111;
		position: absolute;
		top: 200px;
		left: 100px;
	}
	#carousel a
	{
		position: absolute;
		width: 110px;
	}

 

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb
Digg it del.ici.us NewsVine Reddit

eLiberatica 2008 - The Benefits of Open and Free Technologies Conference