Upgrading to jquery.cycle.all.min.js - v2.99

Upgrading to jquery.cycle.all.min.js - v2.99

Hello,

I am currently testing the jquery.cycle.all.min.js v2.99. I was previously using v2.73.

All testing is fine except for the slide navigation bar. I have a row containing four grey round circles. When the slide transitions to the next a darker grey circle is seen to show (activeSlide) what slide is currently displayed. This worked seamlessly with v2.73, but unfortunately has caused some issues using 2.99. Now the darker grey dots indicating the activeSlide no longer appear. To me it looks like my CSS is wrong but I can't seem to fix it. Am hoping someone can assist me please. Thanks in advance

JS:

$(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 9000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });


HTML:

<ul id="nav">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
</ul>
           

CSS:

#nav ul li a:hover,
#nav ul li a.activeSlide { color:#979797; background:url('images/nav_page_1_active.jpgf') no-repeat center center; text-decoration: none; }