3D Cube Image Rotator/Carousel In JavaScript – dimage.js

dimage.js is a dead simple JavaScript rotator/carousel library that makes uses of CSS3 transforms to rotate through images just like a 3D cube.

How to use it:

Download and link to the dimage.js in the document.

<script src="dimage.js"></script>

Add the CSS class dimage to the rotator container and specify the front/back/left/right images as follows:

<div class="dimage"
     data-image-front="front.jpg"
     data-image-right="right.jpg" 
     data-image-left="left.jpg"
     data-image-back="back.jpg">
</div>

The library also supports single image:

<div class="dimage"
     data-image="single.jpg">
</div>

Initialize the library and done.

dimage().initDimages();

Set the direction of rotation: left or right.

<div class="dimage"
     data-direction="left"
     data-image-front="front.jpg"
     data-image-right="right.jpg" 
     data-image-left="left.jpg"
     data-image-back="back.jpg">
</div>
<div class="dimage"
     data-direction="right"
     data-image="single.jpg">
</div>

Set the size of the rotator.

<div class="dimage"
     data-size="400"
     data-image-front="front.jpg"
     data-image-right="right.jpg" 
     data-image-left="left.jpg"
     data-image-back="back.jpg">
</div>

Set the animation speed. The smaller the value, the faster the speed

<div class="dimage"
     data-speed="60"
     data-image-front="front.jpg"
     data-image-right="right.jpg" 
     data-image-left="left.jpg"
     data-image-back="back.jpg">
</div>
<div class="dimage"
     data-speed="1"
     data-image="single.jpg">
</div>