View Full Version : Automatic rotation on 3 d cube

01-17-2016, 07:34 PM
I used this code from your website; but I do not know how to modify it so can use option 2, automatic rotation.


I changed the pause to: 3000 but auto rotate is not working.

Please help.

Thank you.


01-18-2016, 03:08 AM
According to the docs, changing the pause option to a non 0 value kicks it into automatic mode, such as:


div.jkcubeslideshow{ /* main container */
background: white;
display: block;
width: 300px; /* default width of main container */
height: 375px; /* default height of main container */
position: relative;
-webkit-perspective: 1000px; /* Greater the value, less pronounced the 3D effect */
perspective: 1000px; /* Greater the value, less pronounced the 3D effect */;

div.side1, div.side2 { /* two panels that make up cube effect */
width: 100%;
height: 100%;
position: absolute;
-moz-box-sizing: border-box;
box-sizing: border-box;
backface-visibility: hidden; /* hide backface of DIVs */
transition: all 1s ease-in-out; /* CSS transition. Actual duration set by script */;

div.side1 img, div.side2 img { /* how should slideshow images be sized inside panels? */
width: 100%;
height: auto;


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="jkcubeslideshow.js">

/* =====================================
** 3D Cube Slideshow- by JavaScript Kit (www.javascriptkit.com)
** Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
===================================== */



var cubeshowvar1 // arbitrary but unique variable to store slideshow instance

cubeshowvar1 = new jkcubeslideshow({
id: 'cubeshow1',
dimensions: [300, 375],
pause: 3000, // every 3 seconds
images: [
['food5.jpg'] //<-- no comma after last image
] //<-- no comma after last setting