• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Script Index Page Two ways to set panel widths Status Variables- "status1", "status2", and "status3" Enabling Pagination images for a Carousel" oninit(), onslide() and onpanelclick() event handlers Populating a Carousel using Ajax content (initially or on demand) Integrating an Image Viewer such as Facebox with Carousel Viewer

Two ways to set panel widths

The panel DIVs are the DIVs within a Carousel Viewer that contain the individual contents to show, or the DIVs in yellow on your right:

Each Panel DIV must have an explicit width defined in order for the script to work correctly. In case you missed that, each panel needs to have an explicit width defined on it! In other words, you can't simply leave it to the content inside the panels to dictate their width once the contents have all loaded, as the script is initialized as soon as the page loads, not necessarily when all the contents have (this is especially true if you're using Ajax to get the contents remotely/ asynchronously). There are 2 ways to set the panel DIVs' widths, the later if your panel DIVs need to vary in widths.

Method #1: Globally via external CSS, making each panel DIV the same width

If contents within each panel DIV are relatively the same width, or only one panel is visible at a time (based on the size of the Carousel Viewer itself), then you can afford to simply set all panels to be of the same width by setting the applicable external CSS rules in the HEAD section of your page:

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 15px; /*margin around each panel*/
width: 300px; /*Width of each panel holding each content. */
}

An example:

Back 1 Panel Forward 1 Panel

Method #2: Individually via inline CSS, making each panel DIV a different width as needed

If contents within each panel DIV demand different panel widths to accomodate them, you can assign different widths to each panel individually by applying inline CSS inside each panel DIV element on your page:

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel" style="width: 200px">
Panel 1 content here...
</div>

<div class="panel" style="width: 100px">
Panel 2 content here...
</div>

<div class="panel" style="width: 150px">
Panel 3 content here...
</div>

</div>
</div>

An example:

Back 1 Panel Forward 1 Panel

In summary, your panel DIVs must have a width defined, either globally via CSS, or individually, via inline CSS.

Table Of Contents

• Script Index Page
• Two ways to set panel widths
• Status Variables- "status1", "status2", and "status3"
• Enabling pagination images for a Carousel v1.8
• oninit(), onslide() and onpanelclick() event handlers
• Populating a Carousel using Ajax content (initially or on demand) v1.8
• Integrating an Image Viewer such as Facebox with Carousel Viewer