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

Question

내가 찾는 것을 구현하는 수평한 스크롤 사용 jQuery.SerialScroll (에 따라 jQuery.Central).

나는 현재 지속적인 가로 스크롤 작업 liScroll 로 토론에서 이 게시물.

그러나,지금은 필요한 개별 스크롤가 SerialScroll 완벽하게 작동을 위한 수직 스크롤합니다.

어떤 이유에는 경우,'축산으로 지정하는'x'아무 일도 일어나지 않습니다.

내가하고 있습니다 SerialScroll 를 들어 오른쪽에서 왼쪽으로 스크롤 작동합니다.

나는 HTML 다음과 같다:

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

가 jQuery 다음과 같이는 작동할 때 축'y'

 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);
   });

어떤 아이디어가?

//편집(응답 가능)

는 사람들을 위해 함께 와서,허용된 응답을 얻을 제거에 필요한"serialScroll"(해야 central).높이 없이 필요합니다.을 변경해야$('스크롤')를 같은 것$('mywrap')또는$(대상입니다.부모().부모()).설정할 수도 있습니다 자동적인 스크롤 다음과 같다:

 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);

대체#뉴스 ul li 의 적합한 선택.

Answer 1

나는 최근에 작업 central 을 구현하는 코 같은 슬라이더 마법사입니다.

여기 단계 I took:

1. 설정을 포함하는 div 크기고 싶은 슬라이더 나타납니다.overflow:auto;는 데 도움이 테스트,하지만 당신은 아마 사용하려면 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>