Cycle 2 pager styling

Question

Please can you tell me how to create a pager with custom images so that when the slides change the current pager changes to a different image?

In the following example I want the cycle-pager images to change when different slides are activated.

<div class="cycle-pager">


<img src="images/play.png">
<img src="images/cafe.png">
<img src="images/party.png">
</div><!---end cycle-pager------>



<div  class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-pager=".cycle-pager"
data-cycle-pager-template=""

>
<img src="images/img1.png">
<img src="images/img2.png">
<img src="images/img3.jpg">
</div>

Any help appreciated!

Answer 1

I solved my problem!

In case anyone else encountered the same problems as me, here's what I did..

I created a .cycle-pager-active class and gave it the lowest opacity I could in css. I then set the position of cycle-pager to absolute and gave it a background image with the full height and width of the whole pager:

.cycle-pager-active {
   background:white;
   opacity:.10;
filter:Alpha(opacity=10);
}
.cycle-pager {
width:157px;
height:471px;
float:left;
background-image:url(../images/selector.jpg);
position:absolute;

}