Anythingslider Panel change another object

Question

I have written something for 3 buttons which add/remove a css class based on the panel active, but it doesn't seem to work, as it stops checking once I click the NEXT/PREVIOUS button.

So lets say I have 3 panels, and when I'm on panel 1 I want its corresponding button to have a black BG, on panel 2 a red bg, and panel 3 a green BG.

    $(slider).anythingSlider(1, function(slider){
    $('a#jiggler').addClass('active');
    $('a#vr').removeClass('active');
    $('a#rlc').removeClass('active');
});
$(slider).anythingSlider(2, function(slider){
    $('a#vr').addClass('active');
    $('a#jiggler').removeClass('active');
    $('a#rlc').removeClass('active');
});
$(slider).anythingSlider(3, function(slider){
    $('a#rlc').addClass('active');
    $('a#vr').removeClass('active');
    $('a#jiggler').removeClass('active');
});

Answer 1

Use the AnythingSlider onSlideComplete callback function to update your links. Do something like this (demo):

HTML

<nav>
    <a id="grey">1</a>
    <a id="bear">2</a>
    <a id="misc">3</a>
</nav>

<ul id="slider">
    <li><img src="http://placehold.it/300x200" alt="" /></li>
    <li><img src="http://placebear.com/300/200" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
</ul>

CSS

nav a {
    padding: 2px 5px;
    cursor: pointer;
    background: red;
}
nav a.active {
    background: black;
    color: white;
}

Script

var $slider = $('#slider'),
    $nav = $('nav a'),
    updateColors = function($el){
        $el
        .addClass('active')
        .siblings()
        .removeClass('active');
    };

$slider.anythingSlider({
    buildNavigation: false,
    onSlideComplete: function(slider) {
        updateColors( $nav.filter(':contains(' + slider.currentPage + ')') );
    }
});

$nav.click(function(){
    updateColors( $(this) );
    $slider.anythingSlider( $(this).html() );
});