Jquery Anything Slider Nav Bar Callback

I created a custom nav bar function for the Anything Slider that will switch slides based on which 'button' is clicked. I need to also write something that will toggle the 'current' class when one of the slider arrows is pushed but I can't find the event name to look for or where to insert a callback function.

Any help would be appreciated. I've included my nav bar function if it helps.

$('nav ul li').click(function(){ 

    $('nav ul li').removeClass('current'); // reset current menu button

        var slideName = $(this).attr('class'); // get class name

        $(this).toggleClass('current'); // make button current

        $('section.about_us').fadeOut('slow');
        $('#about_us_container').fadeOut('slow', function(){ // hide about us page

        switch (slideName){ //change slide
            case 'navItem1':
           开发者_如何学C     $('#slider').anythingSlider(1);
                    break;
            case 'navItem2':
                $('#slider').anythingSlider(2);
                break;
            case 'navItem3':
                $('#slider').anythingSlider(3);
                break;
            case 'navItem4':
                $('#slider').anythingSlider(4);
                break;
            case 'navItem5':
                $('#slider').anythingSlider(5);
            default:
                //do nothing
        }
    });
});

---

You could just use the appendControlsTo option and have the plugin do all the work (demo).

In the latest verison of AnythingSlider (version 1.7+), you can append the arrows (separately), control panel (navigation + play button), navigation, or just the play button to any element on the page.

Or, if you need to keep your menu intact, try this (demo):

$('#slider').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onSlideComplete: function(slider){
        $('nav ul li').eq(slider.currentPage-1).trigger('click');
    }
});

$('nav ul li').click(function() {
    // prevent infinite loop
    if ($(this).is('.current')) { return; }

    $('nav ul li').removeClass('current'); // reset current menu button
    var slideName = $(this).attr('class'); // get class name
    $(this).toggleClass('current'); // make button current

    $('#slider').anythingSlider(slideName.slice(-1));
});

---

Having looked over the plugin source, I don't think it broadcasts events when the arrows are clicked. That would be very easy to add in, but if you don't want to modify the plugin, after the plugin code is run, you can just bind your own click handlers to the arrows, then in those handlers, get the current page and the numbers of pages via AnythingSlider's external API:

var current = $('#slider').data('AnythingSlider').currentPage
var pages = $('#slider').data('AnythingSlider').pages

Note that the var current will provide the page number before the click, so you'll need to add or subtract one and make sure you're handling the end-of-range properly. Then with the real current page determined, you should be able to apply the current class to your desired LI.

As an aside: since you're going to be adding a current class to these LIs, I think you'll have issues with your switch statement when $(this).attr('class') returns 'navItem2 current' instead of just 'navItem2'. Some refactoring of that will probably save you pain later.