Slide Divs Off Screen Using Jquery + Added Navigation Arrows

Can anyone help with adding navigation arrows to the code snippet found here Slide a div offscreen using jQuery and the first answer given .... http://jsfiddle.net/jtbowden/ykbgT/2

Solution 1:

Should be easy to do :)

make a "navigation control" wrapper element:

var$controller= $('<div class="control-wrapper"/>);

add 2 main elements to act as left and right movement buttons:

var$left= $('<span class="move left"/>').appendTo($controller),
    $right== $('<span class="move right"/>').appendTo($controller);

add an event handler to each movement element for each animation:

$left.click(function(event) {
 ////MOVE THE NAV LEFT
};

$right.click(function(event) {
 ////MOVE THE NAV RIGHT
};

replace the comments with function calls to move the nav (you already have the logic to move it left ;) )

NOTE: Make sure you add "cursor: pointer" to the button element CSS classes so that they appear to be clickable to the user.

Solution 2:

If anyone is interested here is a more detailed answer for a similar question that works perfectly! jQuery animate divs on/off screen sequentially with navigation arrows