ScrollTo 플러그인을 사용하여 div를 가로로 스크롤

내가 얻으려고하는 것은 4div가 "창 공간"내에서 수평으로 (왼쪽에서 오른쪽으로) 스크롤되도록 만드는 것입니다. 나는 easing plugin도 포함 시켰습니다. "TopLinks"링크를 클릭하면 divs가 위아래로 움직일 때 완벽하게 작동합니다 ... 그러나 왼쪽에서 오른쪽으로 스크롤하려고하면 이완이 완전히 사라집니다.ScrollTo 플러그인을 사용하여 div를 가로로 스크롤

Ive는 내 CSS와 관련이 있는지 궁금하지만 Im은 확실하지 않습니다. 이 작업을하는 데 도움이 될 경우 대단히 감사하겠습니다.

HTML

<ul id="topLinks"> 
    <li><a href="#contact">Contact</a></li> 
    ... 
    <li><a href="#home">Home</a></li> 
</ul> 
.... 
<div id="slider"> 
    <div class="active" id="home"> 
    //code here 
    </div> 
    ... 
    <div class="active" id="contact"> 
    //Fourth & last div 
    </div> 
</div>

CSS 당신이 작동하는 데모를 그래서 나는뿐만 아니라 jsfiddle에 던져 것

$(document).ready(function() { 
    $('#topLinks li a').click(function() { 
     $('#slider').scrollTo($(this).attr('href'), 2500, {easing:'swing', axis:'x'}); 
    }); 
});

#slider { 
    position:relative; 
    width:530px; 
    height:380px; 
    margin:60px auto auto 0px; 
    overflow:hidden; 
} 

div.active { 
    float:left; 
    text-align:justify; 
    line-height:30px; 
    width:530px; 
    height:380px; 
    margin: 0px 0px 5px 0px; 
    padding:0px; 
}

JAVASCRIPT : 여기 내 코드입니다. http://jsfiddle.net/BftMr/

출처

2011-08-12 Acour83

슬라이더 div의 각 항목을 포함하는 각 항목의 너비에 걸쳐있는 다른 div로 줄 바꿈해야합니다. (이 경우에는 내가 3000px로 하드 코딩하지만 당신은 아마도 동적으로이를 계산할 것)

가 작동 예는 다음과 같습니다 대답으로 그것을 표시하십시오 않을 경우,

http://jsfiddle.net/NdSyB/

희망이 도움이 .

출처

2011-08-12 21:08:14 jdavies

um. 아직 여기에 새로운, 나는 대답으로 표시하는 방법을 몰라,하지만 네 도움이됩니다. 감사. – Acour83

걱정할 필요가 없기 때문에 기쁘다. 다음은 설명하는 메타 스택 오버 플로우 (meta stackoverflow) 질문입니다. [대답을 수락하는 방법은 무엇입니까?] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#5235) – jdavies

ScrollTo 플러그인을 사용하여 div를 가로로 스크롤

답변

관련 문제