jQuery.ScrollTo/jQuery.SerialScroll 가로 스크롤

Question

을 기준으로 jQuery.SerialScroll을 사용하여 가로 스크롤을 구현하려고합니다.

저는 현재에서 논의하는 것처럼 liScroll을 사용하여 연속 가로 스크롤을 사용하고 있습니다.

그러나 이제는 별도의 스크롤이 필요하며 세로 스크롤을 위해 완벽하게 작동하는 SerialScroll을 사용했습니다.

'axis'속성이 'x'로 지정된 경우 아무런 문제가 발생하지 않습니다.

나는 심지어 SerialScroll example for right to left scrolling을 사용할 수 없습니다.

나는 이런 식으로 HTML을 가지고 :

<div id="pane"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
</div> 

내가 이런 식으로 jQuery를 가지고, 그 축이

jQuery(function($) { 
     var $pane = $('#pane'); 
     $pane.serialScroll({ 
      items: 'div', 
      next: $pane, // the container itself will get bound 
      duration: 2100, 
      force: true, 
      axis: 'x', 
      step: 1, //scroll 1 news each time 
      event: 'showNext' //just a random event name 
     }); 

     setInterval(function() {//scroll each 12 seconds 
      $pane.trigger('showNext'); 
     }, 12000); 
    }); 

어떤 아이디어 'Y'일 때 작동합니다?

// 편집 (허용 대답)를 따라 와서 그 사람들을 위해

이 허용 대답은 "serialScroll"에 대한 요구를 제거한다 (단지 scrollTo 필요). 고도는 필요하지 않았습니다. $ ('scroller')를 $ ('mywrap') 또는 $ (target.parent(). parent())로 변경해야합니다. 다음과 같이 자동 스크롤을 설정할 수도 있습니다.

var index = 2; 

setInterval(function() {//scroll each 5 seconds 
index = index > $('#news ul li').length ? 1 : index; 
    sliderScroll($('#news ul li:nth-child(' + index + ')')); 
    index ++; 
}, 5000); 

적절한 선택기를 #news ul li로 바꿉니다.

Answer 1

최근에 나는 Coda와 같은 슬라이더 마법사를 구현하기 위해 scrollTo를 사용하고있었습니다.

여기에 내가 수행 한 단계는 다음과 같습니다 제가로 표시 슬라이더를 원하는 크기로 컨테이너 div 설정

1. 은. 오버플로 : 자동; 테스트에 도움이되지만 결국에는 overflow : hidden을 사용하려고합니다.
2. 그 안에 다른 div를 배치하고, 모든 요소를 ​​수평으로 유지할만큼 충분히 크게 만듭니다.
3. 패널을 플로트하십시오. 그 (것)들에게 명백한 차원을주십시오.

내 CSS :

.scroller{ 
    position: relative; 
    overflow: hidden; 
    height: 410px; 
    width: 787px;} 
    .modal-content{width: 3400px;} 
    .modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;} 

내 JS :

function sliderScroll(target){ 
    if(target.length <1)return false; 
    $(".current").removeClass("current"); 
    target.addClass("current"); 
    $(".scroller").scrollTo(target,500,{axis:'x'}); 
    return false; 
} 

내 HTML :

<div class="scroller"> 
    <div class="modal-content"> 
    <div>...</div> 
    ... 
    </div> 
</div>