One of the best feature is the ‘pager’ option that will create a pagination of your slideshow. By default, the function will look up for a container with ID value of ‘pager’ and generate this code:
[syntax_prettify linenums=””]
<div id="pager">
<a href="#" class="">1</a>
<a href="#" class="">2</a>
<a href="#" class="activeSlide">3</a>
</div>
[/syntax_prettify]

Without any style, the pager will be shown simply as “123” on the front-end. You can of course stylize it any way you like it, I used to fancy the background-image replacement technique, but I want to share the CSS codes that will display it as dots or bullets. Since this is pure CSS, you can easily change the colors or size quickly and easily.
[syntax_prettify linenums=””]
#pager {
/* you can add positioning properties here if needed */
width: 75px; /* change as required */
padding: 0;
height: 14px;
z-index: 999;
}

#pager a {
display: block;
float: left;
width: 10px;
height: 10px;
text-indent: -999em;
background: #fff;
border-radius: 10px; /* must be the same as width and height */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 1px 1px #707173; /* border color */
margin-right: 10px;
}

#pager a {
background: #c0c0c0; /* optional: color when hovered */
}

#pager a.activeSlide {
background: #707173; /* color when active */
}
[/syntax_prettify]

Quick preview of how it will look like:

There you go. Simple pager for a great slideshow plugin.

The post jQuery Cycle Pager Style as Dots with CSS appeared first on Michael Sunarlim.