$( document ).ready(function() {

    $('.nav').click(function(){
        var dir = $(this).attr('data-direction');
        var nxt = $(this).attr('data-next');

        var currentSlide = $(this).parent();
        var currentSlideClass = currentSlide.attr('class');
        var nextSlide = $('.slide.' + nxt);

        switch(dir)
        {
            case('right'):
                currentSlide.animate({ left: -520}, 1000);
                nextSlide.show();
                nextSlide.css('left', '520px');
                nextSlide.animate({ left: 0 }, 1000);
            break;

            case('left'):
                currentSlide.animate({ left: 520}, 1000);
                nextSlide.show();
                nextSlide.css('left', '-520px');
                nextSlide.animate({ left: 0 }, 1000);
            break;

            // Up
            case('top'):
                currentSlide.animate({ bottom: -520 }, 1000);
                nextSlide.show();
                nextSlide.css('bottom', '520px');
                nextSlide.animate({bottom: 0}, 1000);
            break;

            // Down
            case('bottom'):
                currentSlide.animate({ bottom: 520}, 1000);
                nextSlide.show();
                nextSlide.css('bottom', '-520px');
                nextSlide.animate({bottom: 0}, 1000);
            break;
        }

    });

});