Anythingslider面板更改其他对象

Question

我已经写了一些东西为3个按钮，添加/删除基于面板活动的css类，但它似乎不工作，因为它停止检查，一旦我点击下一步/上一步按钮。

假设我有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;
}

脚本

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() );
});