jQuery Cycle2 slider - numeric pager how to change attributes of active slide

Question

I have searched high and low for this. This is the only site that appears to have people using this Cycle2 library and asking questions so I hope someone can help me with what should be a very simple task. I have an ASP.NET page that is using the Cycle2 slider with divs instead of images. I am using a custom pager per their example. Everything is working fine - the divs transition and the links on the numbered pager do load the related slide when clicked, but the number links in the pager div do not highlight or change at all as the slides transition - so you never know which number is the current slide. Is it possible to have it change the color of the number as the related slide is activated? Here is some of the markup from my aspx page. The content in the asp:PlaceHolder tag is populated by code-behind, but that is irrelevant to the question and provided as context only.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle2.js"></script>   

<div class="cycle-slideshow" 
data-cycle-fx="fade"    
data-cycle-timeout="6000"        
data-cycle-slides="> div"
data-cycle-pager="#custom-pager"
data-cycle-pager-template="<a href=#> <u>{{slideNum}}</u> </a>&nbsp;&nbsp;">


<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

</div>     
<div id="custom-pager" style="text-align: right;font-size:12pt"></div>

Answer 1

There is a class that gets assigned to the active pager element .cycle-pager-active

So all you have to do is style that class and you should be set to go.

JSFiddle Example