jQuery.ScrollTo / jQuery.SerialScroll 水平スクロール
-
03-07-2019 - |
質問
を使用して水平スクロールを実装しようとしています 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 を適切なセレクターに置き換えます。
解決
私は最近、scrollTo を使用して Coda のようなスライダー ウィザードを実装していました。
私がとった手順は次のとおりです。
- 含まれる div を、スライダーを表示するサイズに設定します。オーバーフロー:自動;テストには役立ちますが、最終的には overflow:hidden を使用することになるでしょう。
- その中に別の div を配置し、すべての要素を水平に保持できる大きさにします。
- パネルを浮かせます。明示的な寸法を与えます。
私の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>
所属していません StackOverflow