JQuery Cycle2 Diashow verschachtelte Diashow Nächst

Question

Ich verwende Cycle2 -Plugin, um eine Diashow anzuzeigen, die aus einigen Bildern und einer anderen Diashow besteht. Die nächsten und vorherrschenden Schaltflächen der inneren Diashow funktionieren aus irgendeinem Grund nicht (im Beispiel nach oben und unten), obwohl sie iMHO ordnungsgemäß eingestellt sind:

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

und

<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>

Wie kann ich sie zum Laufen bringen?

Hier ist eine Demo: http://jsfiddle.net/fku2l/22/

Answer 1

Es gibt ein paar Probleme

Erstens sollten verschachtelte Diashows in Zyklus 2 so aussehen:

<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>

Die wichtigen Dinge sind, dass die Folien alle das gleiche Tag sein sollten wie img img img oder div div div nicht img div img. Sie müssen also Ihre erste Folienebene einwickeln imgs innerhalb von Divs. Da sind sie jetzt nicht img, was die Standardeinstellung ist, müssen Sie festlegen data-cycle-slides="> div" auf der äußeren Diashow.

Außerdem benötigen Sie auch Ihre innere Diashow, um sich auch in einem Div zu befinden, wie <div><div class="cycle-slideshow inner-slideshow"> statt gerecht <div class="cycle-slideshow inner-slideshow">. Diashows können verschachtelt werden, aber keine Schwerter überqueren.

Was derzeit in Ihrem Beispiel passiert, ist, dass beide Diashows mit den gleichen nächsten und den vorherrschenden Tasten für beide Shows ausgeführt werden und die Riss des Risss imgs aus dem divs. Anstatt 2 verschachtelte Diashows auszuführen, führen Sie 2 gleichzeitige Diashows aus, bei denen sich einer in der anderen befindet. divs.

machte eine funktionierende Geige: http://jsfiddle.net/filever10/dlqpd/

Sie können mehr erfahren, indem Sie die Quelle hier anzeigen: http://jquery.malsup.com/cycle2/demo/nested.php