JQuery content slider - best practice?

Question

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);
     }
  });

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

});

Answer 1

As a disclaimer, it won't be a good idea to make one yourself for real usage. You might encounter many compatibilities issues on the different browser.

However for study purpose, I am happy to share my little knowledge with you.

I frequently used the jquery plugin jscrollpane from Kelvin Luck. It's a light and configurable plugin. In my opinion, it shall be also an interesting piece for you to study. You can find the code here : http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

Here a very simple usage of this plugin. You might want to have a look as well http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

As far as I know, it makes a strong usage of jquery event system. Feel free to understand it ... and maybe improve it ;-)

Have fun !

Answer 2

In terms of code I would say try to figure out what is common to all four cases (up down left right) and abstract that out. I don't think the TriggerClick variable is very intuitive - not sure its needed.

Use a plugin pattern to add your function to jQuery (see Brainfeeders link), then use that function in the page load.

I played around with the idea but I wont post my code - yell if youre interested in seeing it.