pagerAnchorBuilder - trying to add classes - jquery-cycle

Question

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>
<div id="sliding-gallery" class="sliding-gallery home-content">
<ul>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
</ul>
<span id="#prev" class="prev">Previous</span>
<span id="#next" class="next">Next</span>
</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>
<div id="sliding-gallery" class="sliding-gallery home-content">
<ul>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
</ul>
<span id="#prev" class="prev">Previous</span>
<span id="#next" class="next">Next</span>
</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 + ')';
}
});

Answer 1

I hope you are looking for something similar to this demo
jQuery(document).ready(function($){
var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
// advance the other slideshow
slideshows.not(this).cycle('goto', opts.currSlide);
});
$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});
});
also you can find the above fiddle code on cycle2 website
can you provide your fiddle for this?