Author: | jjkaufman |
---|---|
Views Total: | 2,447 views |
Official Page: | Go to website |
Last Update: | January 7, 2019 |
License: | MIT |
Preview:

Description:
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>