JQuery와 슬라이더 도움

Question

확인 나는 interspire 쇼핑 카트 그래서 너무 하드 사용자 정의합니다 .. 어쨌든

, 여기

이 http://jsfiddle.net/WTvQX/

메신저 데 문제가 스크롤을 받고 내 코드에 대한 링크입니다 ... 제대로

가 여기 내 실제 사이트에서 다르게 작동 ...

작동하도록 그래서 내가 도움이 필요 ... R 데모

...

날

당신은 그러나 왼쪽 버튼으로 "relatedLeft"ID를 추가 이런 식으로 뭔가를 시도해야

Answer 1

를 알것 보자 .. 그것을 전자 일을하거나 수정 : http://jsfiddle.net/wdm954/WTvQX/3/

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

원하는대로 픽셀 거리와 속도를 조정할 수 있습니다.

---

편집 : 다음과 같이 시도해보십시오. 첫 번째 부분은 모든 이미지의 너비를 찾습니다. 그런 다음 애니메이션은 오프셋이 범위 내에있을 때만 시작됩니다.

데모 : 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'); 
    } 
}); 

---

편집 : 여기에 하나 더 코드 옵션을 선택합니다. 이것은 스크롤을 더 빨리 멈추게 할 것입니다 (CSS 변경이 또한 여기에 있습니다).

데모 : 그들 중 어느 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'); 
    } 
});