FF1+ IE7+ Opr9+
Step Carousel Viewer v1.9
Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three "status" variables are here for that purpose. Some highlights of this script:
Demo #1: Auto rotation enabled (every 3 seconds, 1 panel each time), left/right nav buttons enabled, pagination buttons enabled.
Demo #2: Wrap around enabled ("slide"), left/right nav buttons enabled, pagination buttons enabled, status variables enabled.
Demo #3: Wrap around enabled ("pushpull"), variable content widths, moves 2 panels at a time, illustration of new content loaded on demand.
Step 1: Add the following script to the <head> section of your page:
The code above references two external .js files, which you need to download below (right click/ select "Save As"):
Step 2: Add the following HTML to the <BODY> of your page, which corresponds to the HTML for the first demo you see above:
That's it for installation, but this script is only as good as your understanding of it, so time for some documentation.
Basic Set Up Information
The HTML for a Step Carousel viewer follows a set structure consisting of 3 levels of nested DIVs- the main "carousel" DIV, an inner "belt" DIV, finally followed by "panel" DIVs that each hold some actual content:
All the IDs and class names (in red above) can be arbitrary in their values, but must be defined for the script to know what's what. Each piece of content you wish to show would then be wrapped around its own "panel" DIV (in yellow), whether it's just an image, or rich HTML etc.
Moving on, we come to the sample HTML for the buttons/ links used to navigate a Step Carousel Viewer.
Sample HTML for Carousel Viewer navigation:
Last but certainly not least, the initialization script and CSS in the HEAD of your page is what will transform the HTML into a Step Carousel Viewer:
For the invocation code on your left, notice the first 3
parameters and their values in red, which should match up with the CSS class
names you assigned to the DIVs in the HTML. The code supports other
parameters, which we'll cover in detail later. On to the CSS code on your
right, the 3 levels of DIVs- "carousel",
"belt", and "panel" DIVs can be styled however you
wish, but take note of the sideline comments on which ones should be
left alone or treated with care. In particular, the "
width: 250px; /*Width of each panel holding each content. If removed, widths
should be individually defined on each content DIV then. */
This property sets the width of each "panel" DIV (the ones in yellow visually above), and is required in the sense that the script needs to know in advanced the width of each panel. In the simplistic scenario where all your panels can be the same width, you'd simply set the above property to the desired value and that's that. However, in the more common scenario where your panels should be of differing widths, there's another way to set their widths that's flexible. See "Two ways to set panel widths" for more information.
|Set this parameter to the ID attribute value of the outermost Carousel DIV.|
|Set this parameter to the CSS class of the main inner DIV that contains all the "panel" DIVs.|
|Set this parameter to the shared CSS class of each
"panel" DIV within the Carousel, which contains the actual contents.
Each panel DIV must have a width defined, either via global CSS or inline CSS, in order for the script to work properly! See "Two ways to set panel widths" for more information.
|Set this parameter to auto rotate the panels, specifying
the number of panels to move each time, and pause between rotating. Note
that during auto rotation, moving the mouse over the Carousel or the
default buttons (if enabled) pauses it, while moving your mouse out
resumes it again. Clicking on the Carousel stops auto rotation
altogether. This parameter has 3 properties:
Note that if
|This parameter has 4 properties:
|This parameter lets you enable/ disable two navigational
images that are auto positioned to the left and right of the Carousel
Viewer. You can further tweak each image's offsets from its default
position. This parameter has 4 properties:
||Optional parameter that lets you define 3 arbitrary but
unique variable names to be used to store the currently shown
panel (starting), currently shown panel (final), and finally, the total
number of panels in this Carousel.
With the 3 variable names defined, you can also add 3 HTML elements on your page with the same 3 ID values that the script will use to show this information to your visitors.
See "Status Variables- "status1", "status2", and "status3" for full details.
||Optional parameter that lets you specify where your
"panel" DIVs and the actual contents are located.. Defaults to "
You can move all the panel DIVs to an
external file, and use Ajax to dynamically fetch them instead. In this
case, set the 1st parameter to "
contenttype: ["ajax", "somefile.htm"]
When specifying an external content source, you can now empty all the panel DIVs on your page itself, and move that to the external file:
<div id="mygallery" class="stepcarousel">
somefile.htm should now contain:
||Optional event handler that fires once as soon as
a Carousel has finished initializing and is ready for user interaction.
You can use this to run tasks that depend on the Carousel having
||Optional event handler that fires
whenever the Carousel slides and completes going to a panel (such as
statusvars: ["startA", "startB",
||Optional event handler that fires whenever user clicks on one of the panels. A
See "oninit(), onslide() and onpanelclick() event handlers" for full details.
Remember, all but the first 3 parameters above are optional depending on what features you need to use.
Step Carousel supports 3 public methods you can call anywhere on the page to navigate to specific panels in a Carousel or modify its contents on demand. They are:
||Increments a Carousel Viewer by x number of panels when
invoked. The first parameter should be the ID of the Carousel Viewer
itself, while the second an integer (1 or greater) indicating the number
of panels you wish to step by. For example:
||Moves to a specific panel within a Carousel Viewer (count
starts at 1). The first parameter should be the ID of the Carousel
Viewer itself, while the second an integer (1 or greater) specifying the
panel number to move to:
|Dynamically repopulates a Carousel with new content from
an external file on your server using Ajax. The external file should
contain the HTML for the new panels themselves, such as:
To update a Carousel with contents from this file, call
The above link when clicked on will update the Carousel with ID "
See "Populating a Carousel using Ajax content (initially or on demand)" for full details.
This script consists of an index page plus 4 supplementary pages: