Powerful jQuery Cycle Pager Techniques

Standard

So many people raised a question that “How to create dotted pager navigation using jQuery Cycle plugin?” Its simple, isn’t it? lets play with CSS no jQuery no Cycle Plugin…

When using the pager option, the generated navigation elements are simply anchors. So if you set the pager option like so: pager:' #slideDots ' you can style the anchors with CSS code see the example: #slideDots a { background-color: #fc0 }

In addition, the navigation element for the active slide is given the class activeSlide so that it can be styled uniquely.

The pager in the example above is styled like this:

#slideDots {
  position:absolute;
  left:0px;
  width:200px;
  height:25px;
  z-index:10000;
}
#slideDots a {
  background-image:url(/images/dot-controls.png);
  background-repeat:no-repeat;
  background-position:left;
  width:17px;
  height:17px;
  display:inline-block;
  text-indent:-999em;
}

#slideDots a.activeSlide{
  background-image:url(/images/dot-active.png);
  background-repeat:no-repeat;
  background-position:right;
  width:17px;
  height:17px;
  display:inline-block;
  text-indent:-999em;
}

Enjoy!