jQuery.ScrollTo / jQuery.SerialScroll 水平スクロール

Question

を使用して水平スクロールを実装しようとしています jQuery.SerialScroll （に基づく jQuery.ScrollTo).

で説明したように、現在、liScroll を使用して連続水平スクロールを実行しています。 この郵便受け.

ただし、個別のスクロールが必要になり、SerialScroll が垂直スクロールに完全に機能するようになりました。

何らかの理由で、「axis」プロパティが「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」の必要性を取り除きます（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

私は最近、scrollTo を使用して Coda のようなスライダー ウィザードを実装していました。

私がとった手順は次のとおりです。

1. 含まれる div を、スライダーを表示するサイズに設定します。オーバーフロー:自動;テストには役立ちますが、最終的には 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>