Created a 3D Carousel from a list of images, with reflections and animated by mouse position.
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;
}