jquery - jqueryスライダーにスライドカウンターを追加するにはどうすればよいですか?

Question

私はjqueryの新人で、次/前のナビゲーションボタンの横にある「現在のスライド/合計スライド」の形式でスライドカウントを実装したいと考えています。画像スライダーに関して私が持っているものは次のとおりです。ご協力いただきありがとうございます！

$(function() {
    $('#navigation a').click(function() {
        var button = $(this).attr('id');
        var current_image = $('#image img.active');
        var next;
        if (button == 'previous') {
            next = ($('#image img.active').prev().length > 0) ? $('#image img.active').prev() : $('#image img:last-child');
        } else {
            next = ($('#image img.active').next().length > 0) ? $('#image img.active').next() : $('#image img:first-child');
        }
        next.css('z-index', 2).show();
        current_image.fadeOut(600, function() {
            $(this).css('z-index', 1).removeClass('active');
            next.css('z-index', 3).addClass('active');
        });
        return false;
    });
});​

Answer 1

これを試して

$(function() {
var $slides=$('#image img'),klass='active';
$('#navigation a').click(function() {
    var button = $(this).attr('id');
    var current_image = $slides.filter('.'+klass);
    var index=$slides.index(current_image.get(0));
    if (button == 'previous') {
        index=current_image.prev().length?--index:-1;
    } else {
        index=current_image.next().length?++index:0;
    }
    var next=$slides.eq(index);

    next.css('z-index', 2).show();
    current_image.fadeOut(600, function() {
        $(this).css('z-index', 1).removeClass(klass);
        next.css('z-index', 3).addClass(klass);
    });
    return false;
});
});