Skip to content

tkosse/3dcarousel

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

An all-purpose pure CSS 3D carousel.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.9%
  • CSS 10.9%
  • HTML 9.2%