Jquery Cycle activeClass only works after nav is clicked

Updated - Added onAfter function

I'm having a strange issue with cycle.

The Issue i'm having, is that the "activeSlide" class, doesn't get appended to the pager buttons until you click on one. It works fine when the pager items are clicked, but on page load, when the slider starts rolling through, it stays on the first pager item.

Here's my jquery:

$(document).ready(function() {

$('.slideshow').cycle({
            fx: 'scrollHorz',
            timeout: 4000,
            pause: 1,
            pager: '#nav_slide',
            prev:   '#prev_btn', 
            next:   '#next_btn',

            after:   onAfter,

            pagerAnchorBuilder: paginate


        });

});


                        function paginate(idx, el)


  {
    return '<div class="slide' + idx + '"></div>';
}


                    function onAfter() { 

var hasClass = $(".slide3").hasClass("activeSlide");
var hasTheC开发者_开发技巧lass = $(".slide0").hasClass("activeSlide");

if(hasClass == true) {
    $("#nav_slide").animate({"left": "-=226px"}, "fast");
}else if(hasTheClass == true) {
    $("#nav_slide").animate({"left": "0px"}, "fast");
}

}

Any ideas? I've been stumped for a while now!

Thanks in advance.

Little clarification in problem statement would help

1) Are you having problems with "navigation buttons" or "pager buttons"?
2) What is "activeClass" . Do you mean "activeSlide" that gets appended to pager(1,2,3..) elements?
3) Please paste HTML & CSS , if these are relevant.

PS: Since the pager elements are links to slides, I would recommend using <a> instead of <div> tags.

function paginate(idx, el) {
                return '<a href="#">'+ (idx + 1) +'</a>';
            }