jQuery cycle2スライドショーネットスライドショー次のボタンと前のボタン

Question

Cycle2プラグインを使用して、いくつかの画像と別のスライドショーで構成されるスライドショーを表示します。内側のスライドショーの次のボタンと前のボタンは、何らかの理由で（上下、例では）機能しませんが、それらは適切に設定されています。

data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"

と

<div id="upDiv">
    <a href="#" id="upImg"><img src="images/up.png" alt="" /></a>
    <p>scroll up</p>
</div>
<div id="downDiv">
    <p>to see more scroll down</p>
    <a href="#" id="downImg"><img src="images/down.png" alt="" class="outer-slide" /></a>
</div>

どうすればそれらを機能させることができますか？

これがデモです： http://jsfiddle.net/fku2l/22/

Answer 1

いくつかの問題があります

まず、サイクル2では、ネストされたスライドショーは次のようになります。

<div class="cycle-slideshow" data-cycle-slides="> div">
    <div><img src="..."/></div>
    <div>
        <div class="cycle-slideshow inner-slideshow">
            <img src="..."/>
            <img src="..."/>
        </div>
    </div>
    <div><img src="..."/></div>
</div>

重要なことは、スライドがすべて同じタグでなければならないということです。 img img img また div div div いいえ img div img. 。したがって、最初のレベルのスライドを包む必要があります imgs divの内側。彼らは今ではないので img, 、これがデフォルトで、設定する必要があります data-cycle-slides="> div" 外側のスライドショー。

さらに、あなたはまた、あなたの内側のスライドショーがdivの内側にある必要があります。 <div><div class="cycle-slideshow inner-slideshow"> ただの代わりに <div class="cycle-slideshow inner-slideshow">. 。スライドショーはネストすることができますが、剣を交差させることはできません。

あなたの例で現在起こっていることは、両方のスライドショーを一緒に実行していることです。 imgsから divs。したがって、2つのネストされたスライドショーを実行する代わりに、2つの同時スライドショーを実行しています。ここでは、一方が他方の内側にあります。 divs。

作業フィドルを作った： http://jsfiddle.net/filever10/dlqpd/

詳細については、ソースをご覧ください。 http://jquery.malsup.com/cycle2/demo/nested.php