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:
| Sample Step Carousel HTML:
<div id="mygallery" class="stepcarousel"> |
Visual interpretation:
Carousel DIV
Belt DIV
Panel DIV 1
Panel DIV 2
Panel DIV 3
Panel DIV 4 etc...
|
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:
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:
In summary, your panel DIVs must have a width defined, either globally via CSS, or individually, via inline CSS.
Table Of Contents