Description: This image slideshow rotates its
images in eye popping 3D fashion, no special glasses required! It uses CSS3
transform to position two panels in 3D space side by side and perpendicular to
each other, creating the illusion of a cube. The cube effect works in IE10+ and
all modern versions of Firefox and Chrome, including on mobile. Browsers that
don't support the cube effect will just get a regular effect-free slideshow.

The slideshow can be navigated either by manually creating
"forward" and "back" buttons, or by swiping it on mobile devices. It can also be set to auto rotate,
plus each slide can
be optionally hyperlinked.

Example (movie posters used are copyright their respective
sources, and used only for illustration):

Where cubeshowvar1 in red should be an arbitrary but
unique name for each instance of Cube slideshow on the page. Inside
jkcubeslideshow()
is a list of settings for the slideshow, In the above we see three settings defined- the "id",
"dimensions[]", and "images[]". Here is a description of all of the
available settings:

setting

Description

id

Required

The ID of the main slideshow container
DIV.

dimensions: []

defaults to null

The dimensions of the slideshow (width
and height, respectively), in pixels. For example:

dimensions: [300, 500]

If you do not define this setting, then the script will look to
any stylesheet on your page that defines the main container's
dimensions instead. Your slideshow must contain explicit dimensions
and in pixels.

images: []

Required

A two dimensional array specifying the
paths to the images within the slideshow, and for each image, an
optional URL to hyperlink it. The syntax is:

The pause between automatic image
changes in milliseconds. If set to 0 (default value), then the
slideshow becomes a manual slideshow. A value of 3000 for example
causes the slideshow to auto rotate every 3 seconds until the user
swipes or manually navigates the slideshow via manual buttons, for
example.

fxduration

defaults to 1000

The duration of the cube changing
sides, in milliseconds.

swipethreshold

defaults to [50, 300]

The distance and allotted time frame
the user has to swipe/drag the mouse inside the slideshow in order
for it to be considered a swipe. The default is [50, 300], or 50
pixels within 300 milliseconds. Adjust if you feel the swipe
behaviour is too sensitive or not enough.

Defining manual controls for your slideshow

Once a slideshow is initialized, you can define manual controls
for the user to navigate it using. Just call the the method:

slideshowvar.rotatecube(keyword)

Where slideshowvar is the unique but arbitrary
variable name you assigned your slideshow instance when initializing it, such as cubeshowvar1 in red above. Keyword
should either be the string "back" or "forward". So, the following
creates two links that navigate the slideshow cubeshowvar1
back and forward when clicked on: