Anythingslider Panel change another object

Question

Я написал что-то для 3 кнопок, которые добавляют/удаляют класс css на основе активной панели, но она не работает, поскольку она перестает проверяться, как только я нажимаю кнопку NEXT/PREVIOUS.

Итак, скажем, у меня 3 панели, и когда я на панели 1, я хочу, чтобы соответствующая кнопка имела черный BG, на панели 2 красный bg и панель 3 - зеленый 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

Используйте функцию обратного вызова AnythingSlider onSlideComplete для обновления ссылок. Есть ли что-то подобное (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()); 
});