2

ネストされた 1 つのスライドショーを含む、サイト上のいくつかのスライドショーに cycle2 プラグインを正常に実装しました。私はすべての単純で明白な機能を持っていますが、私の頭の上にある高度なビットに問題があります.

ネストされたスライドショーが 1 つあります。カテゴリのスライドショーでは、個々のスライドが表示されます。親スライドショーにはページャー ナビゲーションがあり、内側の各スライドショーには次/前のナビゲーションがあります。私はサイクルを使用する前にこのセットアップを行いました。サイクル バージョンで作業したことの 1 つは、現在アクティブな内部ショーのみを実行させる js でした。今回、整理できなかったのはこれです。

何が起こっているかというと、category1 が最初にロードされると、cat1 の内側のスライドが進行します。それらは、次/前と同様に自動進行します。しかし、次にカテゴリ 2 をクリックすると、cat2 の内側のスライドは、cat1 がスライドしたときと同じ位置にあります。これは、ページをめくっていくカテゴリに当てはまります。すべての内側のスライドショーの進行は、自動進行を待っている場合でも、次/前のナビゲーションを使用している場合でも同じです。私が望んでいるのは、カテゴリ 1 がロードされ、それらを少し調べてから、別のカテゴリをクリックすると、内側のスライドの新しいセットがロードされると、独自のセットの最初から始まるということです。スライド 2.3 を見て、カテゴリ 4 をクリックすると、次に表示されるのは 4.3 ではなく 4.1 です。理想的には、スライドショーを終了するときに各内部スライドショーを一時停止したいのですが、そのため、戻ってきた場合は、中断したところから再開します。でもせめて、見えないまま進めないでほしい。

Malsup のサイトにネストされたスライド ショーのサンプルがありますが、ソース コードの js は少し頭を悩ませています。ほとんどの場合、それが何をしているのかはわかります（子スライドショーが完了すると、parent1からparent2、parent3に自動的に進み、子スライドショーは1回だけ実行されてからシャットダウンします）、jsと私が達成しようとしているものに対して独自のソリューションを展開するのに十分なさまざまなコマンドとイベントが利用可能です。そして、新しいバージョンは明らかに新しすぎて、私が選んで理解できるどこかですでに解決されている答えがありません. ;-)

var outer = $('.catdisplay');
var inners = $('.portfolioslides');

$('.catdisplay').on('cycle-before', function(e, opts) {
    // ignore bubbled events from inner slideshows
    if (e.target !== this)
        return;
    inners.cycle('pause');
});
$('.catdisplay').on('cycle-after', function (e, opts) {
    inners.cycle();
});

これは、問題を解決するための私の非常に貧弱な試みのjsfiddleです。

ありがとう！！

4

1 に答える 1

0

これが起こっている理由は、すべての内部サイクルが同時に進行しているからです。

最初に、カテゴリ 1 以外のすべてのネストされたスライドショーを、data-cycle-paused="true"一時停止を開始するように設定します。

次に、ネストされたスライドショーのページャーを別のクラスに設定します。それらがすべて同じクラスを持っている場合、[次へ] をクリックすると、そのページャー クラスの各スライドショーが次のスライドショーに移動します。それらがすべて一意である場合、現在のスライドショーの移動のみを制御します。

この更新されたjsfiddleを参照してください

于 2013-10-04T17:03:04.793 に答える