Изменение CSS с положением jQuery

Question

Как получить кнопки (var selectSlide), чтобы иметь другой цвет фона, если ползунок (#mySlider) находится в определенной позиции или с соответствующим слайдом.

У меня есть следующие JQuery:

var slideWidth = $('#mySliderContainer').width(); 
var selectSlide = $('.selection') 

function currentButton() { 

    if ($('#mySlider').position().left == 0) { 
    selectSlide.eq(0).css('background', '#6F6F6F'); 
    } else { 
    selectSlide.eq(0).css('background', '#D6D6D6'); 
    } 
    if ($('#mySlider').position().left == -slideWidth) { 
    selectSlide.eq(1).css('background', '#6F6F6F'); 
    } else { 
    selectSlide.eq(1).css('background', '#D6D6D6'); 
    } 
    if ($('#mySlider').position().left == -slideWidth * 2) { 
    selectSlide.eq(2).css('background', '#6F6F6F'); 
    } else { 
    selectSlide.eq(2).css('background', '#D6D6D6'); 
    } 
    if ($('#mySlider').position().left == -slideWidth * 3) { 
    selectSlide.eq(3).css('background', '#6F6F6F'); 
    } else { 
    selectSlide.eq(3).css('background', '#D6D6D6'); 
    } 

} 

ссылка на Jquery расположен на jsFiddle

Мне нужно вызвать функцию снова в JQuery для этого работать ли? Я могу пропустить что-то простое.

Answer 1

Проблема в том, что вы проверяете левую позицию во время перемещения анимации, поэтому она не будет соответствовать.

Возможным решением является отслеживание активного слайда в переменной, которая обновляется отдельно.

Перемещение слайдов слева и справа может иметь подобный код:

activeSlide = (activeSlide+1) % slideCountWidth; 

и

activeSlide = (activeSlide-1) % slideCountWidth; 

Это ручка обертку. Прямой щелчок по слайдам может напрямую установить текущий слайд на все, что было нажато.

Пример сценария: http://jsfiddle.net/uhtxtnks/50/