Переключить класс CSS на изображении с помощью Supersized API/Variables

Question

Я использую плагин Supersized jQuery для анимации фона и использую их API для изменения слайдов при нажатии на изображение / ссылку (я использовал:

$('.navone').click(function(){
api.goTo(1);
});

Теперь мне нужно активное изображение / ссылка, чтобы иметь фоновое изображение, когда слайд активен, пока у меня есть это:

jQuery(function($){
if(vars.current_slide = 1){
$('.navone').toggleClass('active');
});
});

Это, похоже, ничего не делает, я все еще довольно плохо знаком с javascript и jQuery, любой совет был бы отличным.

РЕДАКТИРОВАТЬ:

Я положил

if (vars.current_slide == 1){
(‘#navone’).addClass(‘.active’);
} else {
(‘#navone’).removeClass(‘.active’);
}

В afterAnimation: function(){секции supersized.shutter.js, но, похоже, она вообще ничего не делает. Любой совет?

Answer 1

Изменил оператор на оператор "switch" и добавил класс для первоначального запуска по фактической ссылке.

afterAnimation : function(){
        $('#navone,#navtwo,#navthree,#navfour,#navfive,#navsix,#navseven').removeClass('active');
        switch(vars.current_slide) {
            case 0 : $('#navone').addClass('active'); break;
            case 1 : $('#navtwo').addClass('active'); break;
            case 2 : $('#navthree').addClass('active'); break;
            case 3 : $('#navfour').addClass('active'); break;
            case 4 : $('#navfive').addClass('active'); break;
            case 5 : $('#navsix').addClass('active'); break;
            case 6 : $('#navseven').addClass('active'); break;
        }
}

Answer 2

$(document).ready(function(){ //waits until the document is ready
    $('.navone').click(function(){ //bind a function to the element with class navone
        $('.active').removeClass('active'); //remove all active class
        $(this).addClass('active'); //add class active to the navone link
        api.goTo(1); //make the supersized go to the the slide 1
    });
});

Я не уверен на 100% в функции.goto из этого API, но если она работает в первой строке, она будет работать сейчас.:)

Похоже, что supersized создает автоматическую навигацию, но вам не нужно указывать ее в функции, попробуйте использовать ее и проверьте, работает ли она, тогда вы можете перекомпилировать div:

<div id="controls-wrapper" class="load-item">
    <div id="controls">
        <ul id="slide-list"></ul>
    </div>
</div>