jquery 자동 슬라이더 이전/다음

Question

jquery/css를 사용하는 슬라이더가있는 많은 게시물을 보았습니다.

나는 이미지와 텍스트의 링크를 검색하는 데이터베이스를 가지고있다.

많은 사이트에 표시된 것과 같이 자동 스크롤을 사용하여 최근 슬라이더 유형의 피드 섹션을 만들고 싶습니다.

나는 그것은 오버 플로우 숨겨진 속성을 사용하여 슬라이딩 애니메이션 유래 http://jsfiddle.net/uXn2p/1/

에이 예제를 보았다.

자동화를 위해이 코드를 추가했습니다.

setInterval(function() { 
$(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing"); 
    $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing"); 


$(".list").delay(800).animate({scrollLeft: "-=990"}, 'slow', "swing"); 

    }, 2000); 

하지만 일단이 애니메이션이 시작되면 이전/다음 버튼이 작동을 멈 춥니 다. 내가 뭔가 잘못하고있는 jquery와 유효하지 않습니다 알아요.

어떻게 수정합니까?

Answer 1

나는 당신의 코드를 상당히 바꿨지만, 나는 당신이 찾고있는 것이 있다고 생각한다. 나는이 예에서 벗어났다 : http://jsfiddle.net/n8B2k/1/

나는 html을 아래와 같이 변경했으나 똑같이 보였다. 왼쪽에있는 모든 단계에서 "이전"버튼을 제거하고 오른쪽으로 이동할 때 "더"버튼을 제거하는 기능을 추가했습니다 (마음에 들지 않으면 제거하거나 수정할 수 있음). .

<div id="slidesContainer"> 
    <div id="slideInner"> 
    <div class="slide"> 
     <div class="box">1</div> 
     <div class="box">2</div> 
     <div class="box">3</div> 
    </div> 
    <div class="slide"> 
     <div class="box">4</div> 
     <div class="box">5</div> 
     <div class="box">6</div> 
    </div> 
    <div class="slide"> 
     <div class="box">7</div> 
     <div class="box">8</div> 
     <div class="box">9</div> 
    </div> 
    </div> 
</div> 
<div id="slideShow"> 
    <button class="control" id="leftControl">prev</button> 
    <button class="control" id="rightControl">more</button> 
</div> 

정확하게 사용한 애니메이션은 아니지만 수정할 수 있습니다.

내 피들입니다. http://jsfiddle.net/uXn2p/124/

Answer 2

이 예제는 http://jsfiddle.net/uXn2p/1/으로 수정합니다. 희망이 당신의 문제를 해결하는 데 도움이됩니다.

var myVar = setInterval(function() { 
    $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing"); 
}, 2000); 

$("#more").click(function() { 
    clearInterval(myVar); 
    $(".list").animate({scrollLeft: "+=330"}, 300, "swing"); 
    myVar = setInterval(function() { 
     $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing"); 
    }, 2000); 
}); 

$("#prev").click(function() { 
    clearInterval(myVar); 
    $(".list").animate({scrollLeft: "-=330"}, 300, "swing"); 
    myVar = setInterval(function() { 
     $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing"); 
    }, 2000); 
});