Pulsocheshow nidificato di JQuery Cycle2 Slideshow Avanti e prev Pulsanti

Question

Uso il plug -in Cycle2 per visualizzare una presentazione composta da alcune immagini e un'altra presentazione. I pulsanti della presentazione interna e della presentazione non funzionano per qualche motivo (su e giù, nell'esempio) sebbene siano impostati correttamente IMHO:

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

e

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

Come posso farli funzionare?

Ecco una demo: http://jsfiddle.net/fku2l/22/

Answer 1

Ci sono alcuni problemi

Innanzitutto, nel ciclo 2, le presentazioni nidificate dovrebbero apparire così:

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

Le cose importanti sono che le diapositive dovrebbero essere tutte lo stesso tag, come img img img o div div div non img div img. Quindi dovrai avvolgere il tuo primo livello di diapositiva imgs all'interno dei div. Dal momento che ora non lo sono img, che è l'impostazione predefinita, è necessario impostare data-cycle-slides="> div" sulla presentazione esterna.

Inoltre, hai anche bisogno della tua presentazione interiore per essere anche all'interno di un div, come <div><div class="cycle-slideshow inner-slideshow"> invece di giusto <div class="cycle-slideshow inner-slideshow">. Le presentazioni possono essere nidificate, ma non attraversando le spade.

Ciò che sta accadendo attualmente nel tuo esempio è che sta eseguendo entrambe le presentazioni insieme, usando gli stessi pulsanti successivi e prev per entrambi gli spettacoli e strappando il imgs fuori dal divS. Quindi, invece di eseguire 2 presentazioni nidificate, stai eseguendo 2 presentazioni simultanee, in cui uno sembra essere all'interno dell'altro, che è un sottoprodotto delle presentazioni che si toccano direttamente e le diapositive del primo spettacolo non sono nidificate divS.

ha fatto un violino funzionante: http://jsfiddle.net/filever10/dlqpd/

Puoi saperne di più visualizzando la fonte qui: http://jquery.malsup.com/cycle2/demo/nested.php