I'm using Cycle2 to build a carousel gallery and I've run into a little problem regarding styling the pager buttons. What I've gathered is that Cycle2 creates its own pager span tags for each slide which is a bummer becaus I've already styled my the sub-nav markup. This should be a minor issue as long as I can assign individual classes to the spans and change my css accordingly.

However, I can't get this to work.

TLDR: I was hoping that I could use pagerAnchorBuilder to create individual classes for each span. I can't. Help.

The original markup (pre Cycle2) looks like the following:

<div id ="sub-nav" class="sub-nav">
<ul>
<li><a id="available" class="available" href="#"></a></li>
<li><a id="reliable" class="reliable" href="#"></a></li>
<li><a id="use" class="use" href="#"></a></li>
<li><a id="reports" class="reports" href="#"></a></li>
<li class="last"><a id="software" class="software" href="#"></a></li>
</ul>       
</div>

With Cycle2 it looks like this (note the addition of the span tags)

<div id ="sub-nav" class="sub-nav">
<ul>
<li><a id="available" class="available" href="#"></a></li>
<li><a id="reliable" class="reliable" href="#"></a></li>
<li><a id="use" class="use" href="#"></a></li>
<li><a id="reports" class="reports" href="#"></a></li>
<li class="last"><a id="software" class="software" href="#"></a></li>
</ul>
<span class="cycle-pager-active">•</span><span>•</span><span>•</span><span>•</span><span>•</span></nav>         
</div>

Cycle2

$('#sliding-gallery ul').cycle({ 
    fx:     'carousel',
    carouselVisible: 1,     
    speed:  'fast', 
    timeout: 10000,
    slides: '>li',      
    next:   '.next', 
    prev:   '.prev',
    pager:  '.sub-nav',
    pagerAnchorBuilder: function(idx, slide) { 
        return '.sub-nav span:eq(' + idx + ')';
    }
});