尝试仅定位滑块功能中的可见元素

Question

我有一个效果很好的滑块，虽然我在尝试添加过滤功能时遇到了麻烦。

目前我已经正确过滤了所有元素，现在我需要做的就是调整我的滑块功能以仅影响可见的元素。

$.fn.archiveSlider = function (timeout, cls) {
    var l = this.length,
        current = 0,
        prev = 0,
        elements = this,
        timerId;

    if (this.filter('.active').length > 0) {
        current = this.index(this.filter('.active')[0]) + 1;
        prev = current - 1;
    }

    this.hover(function(){
        var attachment = elements.eq(current - 1).attr( 'hover-data' );
        var attachmentA = $( this ).attr( 'hover-data' );
        elements.eq(current - 1).removeClass('active');
        $( '#' + attachment ).removeClass('active');
        $( '#' + attachmentA ).addClass('active');
        clearTimeout(timerId);    
    },
    function(){
        var attachment = elements.eq(current - 1).attr( 'hover-data' );
        var attachmentA = $( this ).attr( 'hover-data' );
        elements.eq(current - 1).addClass('active');
        $( '#' + attachmentA ).removeClass('active');
        $( '#' + attachment ).addClass('active');
        timerId = setTimeout(next, timeout);          
    })

    function next() {
        var previous = elements.eq(prev);
        var nextos = elements.eq(current);
        previous.removeClass('active');
        nextos.addClass('active');
        var attachment = elements.eq(current).attr( 'hover-data' );
        $( '#' + attachment ).addClass('active');
        var attachment = elements.eq(prev).attr( 'hover-data' );
        $( '#' + attachment ).removeClass('active');
        prev = current;
        current = (current + 1)%l;
        timerId = setTimeout(next, timeout);
    }
    timerId = setTimeout(next, timeout);
    return this;
};

项目被display：none;

隐藏

演示http://stage.barkdesign.com.au/private/