루핑 디비 (jQuery Carousel)

Question

하나의 페이지 앱을 만들었고 하나의 섹션을 제외한 모든 것이 작동합니다. 여기있다 : 사용자가 클릭하거나 무기한 화살표와 견본이 같은 방향으로 계속 스크롤 할 수 있도록 내가 회전 목마와 같은 루프에 견본 섹션을 얻기 위해 여러 번 시도를 해봤

http://efeldberg.biz/assets/projects/HTML5_Banners/ArtInstitute/ColorPicker.html

.

나는 더 많은 수의사, 기타 스크립트, 내 자신의 JS 및 CSS3을 시도했지만 이것을 얻을 수 없습니다. 제안은 대단히 감사합니다! 감사!

Answer 1

거의입니다.

두 번째 장면이로드 될 때 #swatchContent -503 픽셀의 왼쪽 여백에 애니메이션을 적용한 것처럼 보입니다. 이것을 제거하거나 대신 left에 애니메이션을 적용하십시오. 이것은 당신의 수학에 괴롭힘을당한 것 같습니다.

그러면 터미널 번호를 수정하면됩니다. 한 블럭의 너비가 오른쪽으로 너무 멀리 떨어져서 다시 돌아서 기 시작하는 것처럼 보입니다. 그렇게 줄이면 잘되어야합니다.

여기 jQuery로 왼쪽 여백을 제거했습니다. 화살표를 사용하여 지금 (당신이 말을 명중 할 때까지, 꼭 0 픽셀로 리셋 위치를 업데이트 할) 의도 한대로 작동하는 것 같다 : 당신은 그래서 내를 공유 할 코드를 공유하지 않았다

Answer 2

.
http://jsbin.com/paqim/4/edit 당신은 멋진 무한한 슬라이더를 가지고 있습니다.

HTML :

<div id="page"> 
    <div id="swatches"> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
     <div>4</div> 
     <div>5</div> 
    </div> 
    <button id="prev">&#9664;</button> 
    <button id="next">&#9654;</button> 
</div> 

JQ :

var $s = $("#swatches"), 
    $b = $('#prev, #next'), 
    $d = function(fl){return $('>div',$s)[fl]();}, 
    px = 260; // Animation px 

$s.prepend($d('last')).scrollLeft(px); // Prepend last + reset pos to '1'. 

$b.click(function() { 
    if(!$s.is(':animated')){ 
    if(this.id=="next") $s.animate({scrollLeft:px*2}, 400, function() { 
     $s.scrollLeft(px).append($d('first')); 
    }); 
    else $s.prepend($d('last')).scrollLeft(px*2).animate({scrollLeft:px}, 400); 
    } 
});