2012-04-12 22 views
1

プロジェクトでjQueryサイクルを使用しています。私のスクリプトat pastebinを見ることができます。jQueryサイクルを使用して複数のスライダを同期する

基本的に、3つの異なるスライダが同じ方向制御に接続されています。私は彼らのトランジションを同期させたいと思います。

ここに3つの別々のスライダーインスタンスがあるため、それらは同期を開始しますが、ブラウザーのウィンドウなどを離れるとすぐに時々すぐに同期することがあります。—これにより、シーケンスの順序が乱れ、一般に見えなくなります。まったく同じタイミングですべてのスライダを起動させたい場合は、好ましくは.sliderImagesのスライドにリンクしてください。

他の2つのスライダを含む関数を作成して、beforeオプション(.sliderImagesスライダ)に配置しようとしましたが、問題が発生してトラブルシューティングに十分なJSがわかりません。

いつものように、どんな助けもありがとうございます。

ありがとうございます!

+1

'timeout:0'にすべて設定し、' setInterval( "。slides")サイクル( 'next') "、3000);を追加するとアニメーションを同期させるようですが、前の/次のスライドナビゲーション。 – bigsweater

+0

[私はほとんどそれを持っている](http://pastebin.com/djtYwA0r)。スライドが正しく同期し、ホバーでショーが一時停止します。マウスが「.hero」領域を離れるとき、何かが間違っている。単にスライドショーを再開するのではなく、他のすべてのスライドやそのラインに沿った何かのスピードを2倍にするようです。私は単に、どうやらjavascriptのSetInterval機能を誤解していると思います。どんな助けもありがたい。 [私はこれを試しました](http://forum.jquery.com/topic/jquery-cycle-plugin-synchronized-slideshows-with-pause-on-hover)、動作させることができませんでした。 – bigsweater

答えて

1

私の頭をしばらく壁に突っついてから、私はRyan Florence's jQuery Slideshowにつまずいた。 Cycleや他のスライドショープラグインと比べて軽量で(jQuery UIが必要ですが)、文書化されていて、比較的簡単にドロップインして、好きなように作業することができます。

thread on his slideshow Github pageがあり、コードが正しく機能するように手伝ってくれました。link to the final codeもあります。

もちろん、誰かが自分のコードを改善する提案があれば、私はそれらに公開しています。しかし、このプラグインは、シンプルで汎用性の高いものとして来ています。

おそらく、私はFlexsliderのような、それはモバイルフレンドリー作ることができるよりも多くの有能なプログラマー...

0

あなたはjqueryのサイクルをアップロードするための(ウィンドウ).LOADの機能を使用し、同じ2つの異なるセレクタを使用している場合2つのスライダを完全に同期させる必要があります。

2つの独立したinitsとしてロードした場合、またreadyの状態でそれらをロードした場合、タイミングがずれていたと思われます。

とにかく、それは私のために働く。

+0

私はこれを構築して以来、しばらくしていましたが、私が思い出したように、同じinitで2つの異なるセレクタを使用しようとしましたが、最終的に同期が外れてしまいます。また、スライダごとに異なるトランジションを使用しようとしていましたが、これは単一のinitを使用するのが難しくなりました(私はJSのエキスパートではありませんでしたので、簡単に解決できるかもしれません)。 – bigsweater

+0

また、FlexSliderの最新バージョンでも同様の再生/一時停止フックが提供されているため、setTimeoutを使用して、異なるトランジションの2つ(またはそれ以上)のスライダを同期させることもできます。このサイトを構築していたとき、FlexSliderはその点でかなり制限されていました。 (自分のトランジションはまだ作成できません...) – bigsweater

関連する問題