JQuery content slider - best practice?

I want to create a website that’s basically a giant content slider, on page load you’d see div 1 (essentially the whole screen) and then you can click the down arrow to go to page 2 etc, when you get to page 2 I also want to be able to go left and right (only on page 2), think of it as an image slider but with divs..

I know there are plugins available but I quite fancy writing it myself, I’ve written some (basic) JQuery which does work but It seems too bloated and I wanted a better/more efficient way of doing it.. what I'm after is how the best way to approach this is, I'm not looking for code as I want to learn and get better but can't think of the best way to tackle this, is it possible to use some kind of switch statement? how would you go about doing it?

I'll also need someway of making sure you can't scroll past the number of divs, I'm currently using a var with if statements but feel there must be a way to combine everyone into a simple function?

JS is below and there's also a JSFiddle

Thanks!

http://jsfiddle.net/W4SVz/

$(function () {
  var box = $('.box');
  TriggerClick = 0;

  $("#down").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 0){
         TriggerClick = 1;
         $(box).stop().animate({top:'-='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 2;
         $(box).stop().animate({top:'-='+height}, 500);
     }
  });

   $("#up").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 2){
         TriggerClick = 1;
         $(box).stop().animate({top:'+='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 0;
         $(box).stop().animate({top:'+='+height}, 500);
     }
  });

  $("#left").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'-='+height}, 500);