jquery - カルーセルの 2 番目のスライドのバグ

Question

だから、私は自分のカルーセルを構築しようとして過去8時間を費やしてきました.jqueryは初めてです。2枚目のスライドにバグがあります。

次に 2 番目をクリックすると、戻るボタンが表示されるはずですが、2 回目のクリックでしか表示されません。

これが私のコードです：

$(document).ready(function() {
    var sliderWidth     = 300; // Give the size of the window
    var sliderV         = $('#slide-wrap-vertical'); // Assigns the container that has all the sectiosn that will be scrolled vertically
    var sliderCount     = $('#slide-wrap-vertical').children().size(); // Gets the size of the vertical slider    
    var sliderHeight    = sliderCount * sliderWidth; // Takes the height of the slider

    $('#slide-wrap-vertical').css('height', sliderHeight); // assigns the height
    //$('a.temp').text(sliderHeight);    

    showHideDirection();

    $('a.nav-top-prev').on('click',function () {

        $('#slide-wrap-vertical > div').animate({
            'top': '+=' + sliderWidth + 'px'
        }, 500);
        showHideDirection();

    });

    $('a.nav-top-next').on('click', function () {
        $('#slide-wrap-vertical > div').animate({
            'top': '-=' + sliderWidth + 'px'
        }, 500);
        showHideDirection();

    });


    function showHideDirection() {

        $(sliderV).children().each(function(){ // Checks all the children of the vertical carousel          

            if ($(this).position().top == 0) {
                var index = $(this).index();

                $('a.nav-top-prev').toggle(index!==0);
                $('a.nav-top-next').toggle(index!==sliderCount-1);
            }

        });
    }


});

機能を確認したい場合は、jsfiddleも追加しました

http://jsfiddle.net/Dethdoll/WkFVs/12/