JQuery Cycle2 Presentación de diapositivas Presentación de diapositivas a continuación y botones anteriores

Question

Utilizo el complemento Cycle2 para mostrar una presentación de diapositivas compuesta por algunas imágenes y otro espectáculo de diapositivas. Los botones de presentación de diapositivas interiores y previas no funcionan por alguna razón (arriba y abajo, en el ejemplo) aunque se establecen correctamente en mi humilde opinión:

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

y

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

¿Cómo puedo hacer que funcionen?

Aquí hay una demostración: http://jsfiddle.net/fku2l/22/

Answer 1

Hay algunos problemas

Primero, en el ciclo 2, las presentaciones de diapositivas anidadas deberían verse así:

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

Las cosas importantes son que todas las diapositivas deben ser la misma etiqueta, como img img img o div div div no img div img. Entonces necesitarás envolver tu primer nivel de diapositiva imgs dentro de los divs. Dado que ahora no son img, que es el valor predeterminado, debe establecer data-cycle-slides="> div" En la presentación de diapositivas exteriores.

Además, también necesita que su presentación de diapositivas internas esté dentro de un DIV también, como <div><div class="cycle-slideshow inner-slideshow"> en lugar de solo <div class="cycle-slideshow inner-slideshow">. Las presentaciones de diapositivas se pueden anidar, pero no cruzar espadas.

Lo que está sucediendo actualmente en su ejemplo es que está ejecutando ambas presentaciones de diapositivas juntas, usando los mismos botones Siguientes y anteriores para ambos espectáculos, y rasgando el imgs fuera del divs. Entonces, en lugar de ejecutar 2 presentaciones de diapositivas anidadas, está ejecutando 2 presentaciones de diapositivas concurrentes, donde uno está dentro del otro, que es un subproducto de las presentaciones de diapositivas que se tocan directamente entre sí y las diapositivas del primer espectáculo no se están anidando divs.

hizo un violín de trabajo: http://jsfiddle.net/filever10/dlqpd/

Puede obtener más información viendo la fuente aquí: http://jquery.malsup.com/cycle2/demo/nested.php