$(document).ready(function() { var SLIDE_LENGTH, slider, box, max, min, len, offset, margin, slider, bpm, //box pluss margin cp, direction; // current position var cbs = { slide_right: function() { if (cp < max) { cp += SLIDE_LENGTH; if (cp > max) { cp = max; } $(slider).animate({ 'left': cp + 'px' }); } else { direction = !direction; } }, slide_left: function() { var left_offset = -250; if (cp > min) { cp -= SLIDE_LENGTH; if (cp < min) { cp = min; } $(slider).animate({ 'left': cp + 'px' }); } else { direction = !direction; } } } function slide_animation() { // decide which way to slide if (direction) { cbs.slide_right(); } else { cbs.slide_left(); } setTimeout(slide_animation, 6000); } // get the base dimensions for the relevant elements // and the right margin from item box // the margin needs to be sliced to remove the px and // converted to an int, i do it all with one variable box = $('.footer_slider_item_box').width(); len = $('#footer_slider_wrapper_inner').width(); min = -len + 672; // 494 is the container length - the left and right margin of the inner container max = 0; margin = $('.footer_slider_item_box').css('margin-right'); margin = margin.substring(0, margin.length -1); margin = parseInt(margin); bpm = box + margin; cp = 0; direction = false; // false is slide towards left, true towards right // PSEUDO CONSTANT SLIDE_LENGTH = 672; slider = $('#footer_slider_wrapper_inner'); if (len > SLIDE_LENGTH) { //slide_animation(); $('#footer_slider_foreground_left').click(function() { cbs.slide_right(); }); $('#footer_slider_foreground_right').click(function() { cbs.slide_left(); }); function get_left(obj) { var lmstr = $(slider).css('left'); return parseInt(lmstr.substring(0, lmstr.length-2)); } } else { // not enough items } });