jQuery Cycle is a great plugin to create image slides on your website. Out-of-the-box, it is so simple to use but you can explore the options extensively to get the functions and effect that you expected.

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:

<div id="pager">
  <a href="#" class="">1</a>
  <a href="#" class="">2</a>
  <a href="#" class="activeSlide">3</a>
</div>

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.

#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 */
}

Quick preview of how it will look like:

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