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


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