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 + ')';
}
});
