Image Carousel 3DJS

Installation

• add image-carousel-3d.js and image-carousel-3d.css to your project files and import them in your HTML code:

  <script type="text/javascript" src="image-carousel-3d.js"></script>
  <link type="text/css" rel="stylesheet" href="image-carousel-3d.css" media="all" />

• build your carousel <div> container and initialize it:

  <div id="my-carousel" data-carousel-head="2" data-carousel-tail="2">
  	<img src="image0.jpg" />
  	<img src="image1.jpg" />
  	<img src="image2.jpg" />
  	...
  </div>

Carousel3D.enable('my-carousel');

• customize style in image-carousel-3d.css

---

Documentation

• Carousel3D.enable(element)

  Parameter callback

  id or the HTML container itself that will be initialized as a carousel

  the HTML container must have a valid data-carousel-head="n" attribute

  optionally, it may also have a data-carousel-tail="n" if you want the carousel to be asymmetric

  it must have enough children elements (head × 2 + 1)

  Return value

  an object with several methods:

  get()

  returns the current index

  set(newIndex [, desiredDirection])

  slides to an specific index
  desiredDirection can be 'left' or 'right' (just in case you want it to slide in a specific direction)

  next()

  slides to next index

  prev()

  slides to previous index

  you can use these methods anywhere to manipulate the carousel

  
  

---

License

This project is released under MIT license.