Jquery slider help

ok so i have an in开发者_开发问答terspire shopping cart so its hard to customize..

anyway,

here is a link to my code http://jsfiddle.net/WTvQX/

im having trouble getting the scroll to work properly...

it works differently on my actual site here...

so i need help... re-doing it or just fixing..

let me kno

You need to add the "relatedLeft" ID to the left button, however try something like this...

Demo: http://jsfiddle.net/wdm954/WTvQX/3/

$('#relatedRight').click(function() {
    $('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
    $('#scool').animate({left: "-=100px"}, 'slow');
});

You can adjust pixel distance and speed to your liking.

EDIT: Try something like this. The first part finds the width of all the images. Then the animates only fire when the offset is within range.

Demo: http://jsfiddle.net/wdm954/WTvQX/5/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
});

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < w) {
        $('#scroll').animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left > -w) {
        $('#scroll').animate({left: "-=100px"}, 'slow');
    }
});

EDIT: One more code option here. This one will stop scrolling sooner (note there are CSS changes here also).

Demo: http://jsfiddle.net/wdm954/WTvQX/7/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
    w += parseFloat($(this).css('paddingRight'));
    w += parseFloat($(this).css('paddingLeft'));
    w += parseFloat($(this).css('marginRight'));
    w += parseFloat($(this).css('marginLeft'));
});

$('#scroll').css('width', w + 'px');

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < 0) {
        $('#scroll').stop().animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    var b = $('#bar').width();
    if (offset.left > b-w) {
        $('#scroll').stop().animate({left: "-=100px"}, 'slow');
    }
});