JQUERY CYCYME2 Diaporama Nestesthow Next et Préc boutons

Question

J'utilise le plugin Cycle2 pour afficher un diaporama composé de certaines images et d'un autre diaporama. Les boutons Next and PREV du diaporama intérieur ne fonctionnent pas pour une raison quelconque (de haut en bas, dans l'exemple) bien qu'ils soient correctement définis à mon humble avis:

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

et

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

Comment puis-je les faire fonctionner?

Voici une démo: http://jsfiddle.net/fku2l/22/

Answer 1

Il y a quelques problèmes

Tout d'abord, dans le cycle 2, les diaporamas imbriqués devraient ressembler à ceci:

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

Les choses importantes sont que les diapositives doivent toutes être la même balise, comme img img img ou div div div ne pas img div img. Vous devrez donc envelopper votre premier niveau de diapositive imgs à l'intérieur des div. Puisqu'ils ne sont pas maintenant img, qui est la valeur par défaut, vous devez définir data-cycle-slides="> div" sur le diaporama extérieur.

De plus, vous avez également besoin de votre diaporama intérieur pour être à l'intérieur d'une div, comme <div><div class="cycle-slideshow inner-slideshow"> au lieu de juste <div class="cycle-slideshow inner-slideshow">. Les diaporamas peuvent être imbriqués, mais ne pas traverser les épées.

Ce qui se passe actuellement sur votre exemple, c'est qu'il exécute les deux diaporamas ensemble, en utilisant les mêmes boutons suivants et précédents pour les deux émissions, et déchirer le imgs hors du divs. Ainsi, au lieu d'exécuter 2 diaporamas imbriqués, vous utilisez 2 diaporamas simultanés, où l'un se trouve à l'intérieur de l'autre, ce qui est un sous-produit des diaporamas se touchant directement et les diapositives du premier spectacle ne sont pas imbriquées dans divs.

fait un violon de travail: http://jsfiddle.net/filever10/dlqpd/

Vous pouvez en savoir plus en regardant la source ici: http://jquery.malsup.com/cycle2/demo/neted.php