An all-purpose pure CSS 3D carousel.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
sunsets Initial import Oct 2, 2012
3dcarousel.js Use id instead of class for the main element Apr 9, 2013
README.md Modified sample code Oct 13, 2012
demo.css Removed useless rules Oct 18, 2012
demo.js
index.html Removed useless rules Oct 18, 2012
prefixfree.min.js Added prefixfree to the demo page Oct 12, 2012

README.md

#3dcarousel.js An all-purpose pure CSS 3D carousel.

The Carousel takes advantage of CSS 3D transforms using a strictly compliant syntax.

To use the Carousel in a browser using vendor-specific CSS 3D transforms, you have to include PrefixFree before the 3dcarousel script to automatically convert the generic CSS rules to your browser specific ones.

Check here the status of CSS 3D Transforms: Can I use CSS3 3D Transforms?

##Usage

<script type='text/javascript' src='prefixfree.js'></script>
<script type='text/javascript' src='3dcarousel.js'></script>

function onCellAdded(cell,index) {
	// Here define what goes inside the cell at given index
}

...

var container = document.getElementById("container");
carousel = new Carousel(container,// Containing node
                        9,        // Nb Cells
                        465,      // Cell width
                        352,      // Cell height
                        onCellAdded,
                        onCellFocus,
                        onCellBlur,
                        onCellSelect
                        );

##Demo

Try out the demo.

##License

You may use this code under the terms of the MIT license.