New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


Enabling pagination images for a Carousel

You can easily enable pagination images be shown for any Carousel on your page, which lets users visually see which panel they're currently at and go to a specific panel. Simply define a DIV anywhere on the page with the ID attribute "galleryid-paginate", replacing "galleryid" is the ID of your Carousel in question. The DIV should then contain a single image, which the script will use as the template to generate additional images accordingly. Here's an example:


<div id="gallerya" class="stepcarousel" style="width: 540px">
<div class="belt">

<div class="panel">
<img src="fruits.jpg" /><br />
</div>

<div class="panel">
<img src="cave.jpg" />
</div>

<div class="panel">
<img src="pool.jpg" />
</div>

<div class="panel">
<img src="autumn.jpg" />
</div>

<div class="panel">
<img src="dog.jpg" />
</div>

</div>
</div>

<p id="gallerya-paginate" style="width: 540px; text-align:center">
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
</p>

Inside your designated pagination DIV, define a single image tag with the following 4 attributes:

  • src: The src to the pagination image in its default state.
  • data-over: The path or full URL to the pagination image when the mouse rolls over it.
  • data-select: The path or full URL to the pagination image when it's selected (based on the panel currently in view).
  • data-moveby: An integer setting how many panels each pagination image should move the Carousel by. If you want a link generated for each panel, set it to 1, or 2 for example if two panels are visible at once on the page and you wish to reduce the number of links generated.

Table Of Contents