Automatic rotation on 3 d cube

[JIMBO99]

I used this code from your website; but I do not know how to modify it so can use option 2, automatic rotation.

http://www.javascriptkit.com/script/script2/cubeslideshow.shtml#

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

Please help.

Thank you.

Jim

[ddadmin]

According to the docs, changing the pause option to a non 0 value kicks it into automatic mode, such as:


<style>

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;
}


</style>


<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
===================================== */

</script>

<script>

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

jQuery(function($){
cubeshowvar1 = new jkcubeslideshow({
id: 'cubeshow1',
dimensions: [300, 375],
pause: 3000, // every 3 seconds
images: [
['food1.jpg'],
['food2.jpg'],
['food3.jpg'],
['food4.jpg'],
['food5.jpg'] //<-- no comma after last image
] //<-- no comma after last setting
})
})

</script>