jquery cycle pager problems

jquery cycle pager problems

I'm using the cycle plugin to create a feature rotator but have a couple of issues preventing me from getting it to work as I need.

I am using the pagerAnchorBuilder as I have my own pagers but mousing over the last pager isn't changing the slide and mousing over the second pager changes to the third slide.

I also need to add a class to the parent div of the active pager link to indicate it is the active slide.  But I'm not sure how to go about it.

This is my jquery code

  1. $('#rotator_image_container').cycle({
        fx: 'fade',
        timeout: 4000,
        speed: 300,
        pause: 1,
        pager: '#rotator_nav',
        pagerEvent: 'mouseover',
        pagerAnchorBuilder: function(idx, slide) {
            return '#rotator_nav div:eq(' + (idx) + ')';
        }
    });









And my html structure (there are 3 rotator_nav_item divs and 3 rotatorbox divs)
  1. <div id="rotator_nav">
        <div class="rotator_nav_item">
            <div class="rotator_nav_item_inner">
                <a href="#">Why London</a>
            </div>
        </div>
    </div>
    <div id="rotator_image_container">
        <div class="rotatorbox" style="background-image: url(/assets/slides/home/slide1.jpg)">
            <div class="rotatorbox_inner">
                <a>Study in the Heart of London</a>
            </div>
        </div>
    </div>












Any help would be greatly appreciated as my deadline is looming large.