Enabling pagination buttons for a Carousel
You can easily enable pagination button 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" with the ID of your Carousel in question. Inside
this DIV should contain the markup for a single button, which the script then
uses as template to generate the required number of buttons based on carousel
length. The button markup can be one of the following:
1) A SPAN element styled using CSS v2.0 feature
<span class="paginatecircle" data-moveby="1"></span>
Adjust the data-move attribute to dicate how many panels each
pagination button should move. The following illustrates the entire markup for a
carousel with the code for the pagination DIV and button implemented:
<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">
<span class="paginatecircle" data-moveby="1"></span>
</p>
The script adds a CSS class of "selected" to the SPAN button
corresponding to the current panel shown, allowing you to style it so it
differentiates from its peers. With that in mind, here is the default CSS you
should have to style your carousel buttons:
<style>
span.paginatecircle{ /* CSS for paginate circle spans. Required */
background: white;
border: 2px solid black;
border-radius: 10px;
width: 6px;
height: 6px;
cursor: pointer;
display: inline-block;
margin-right: 4px;
}
span.paginatecircle:hover{
background: gray;
}
span.paginatecircle.selected{
background: black;
}
</style>
2) An image element instead
Instead of a SPAN based pagination button, you can use an image instead, with support for a mouse over and selected image at the same time. The markup for such a button should look like:
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
As you can see, there are a few more attributes that should exist inside an image based button compared to SPAN. In all there are 4:
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.
Here is the full markup for a carousel again, this time with the markup for an image based pagination DIV and buttons added instead:
<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>
You can download the 3 pagination images used in the demo above here:
Table Of Contents