Installation
-
add
image-carousel-3d.jsandimage-carousel-3d.cssto 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');
image-carousel-3d.cssDocumentation
Image Carousel 3D JS provides three different objects to handle the three different methods of file attachment:
-
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"attributeoptionally, it may also have a
data-carousel-tail="n"if you want the carousel to be asymmetricit 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
desiredDirectioncan 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
- Parameter
License
This project is released under MIT license.