JQuyy Cycle2 Slideshow Nested Slideshow Buttons e Prev Buttons

Question

Eu uso o plug -in Cycle2 para exibir uma apresentação de slides composta por algumas imagens e outra apresentação de slides. Os botões Next Slideshow da apresentação interna não funcionam por algum motivo (para cima e para baixo, no exemplo), embora estejam definidos corretamente 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>

Como posso fazê -los funcionar?

Aqui está uma demonstração: http://jsfiddle.net/fku2l/22/

Answer 1

Existem alguns problemas

Primeiro, no ciclo 2, as apresentações de slides aninhadas devem ficar assim:

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

As coisas importantes são que os slides devem ser a mesma tag, como img img img ou div div div não img div img. Então você precisará embrulhar seu primeiro nível de slide imgestá dentro de Divs. Já que eles agora não são img, que é o padrão, você precisa definir data-cycle-slides="> div" na apresentação de slides externos.

Além disso, você também precisa da sua apresentação de slides interna para estar dentro de uma div também, como <div><div class="cycle-slideshow inner-slideshow"> em vez de apenas <div class="cycle-slideshow inner-slideshow">. As apresentações de slides podem ser aninhadas, mas não cruzando espadas.

O que está acontecendo atualmente no seu exemplo é que ele está executando as duas apresentações de slides, usando os mesmos botões próximos e prev para os dois shows e rasgando o imgestá fora do divs. Então, em vez de executar duas apresentações de slides aninhadas, você está executando duas apresentações de slides simultâneas, onde um está dentro do outro, que é um subproduto das apresentações de slides diretamente se tocando e os slides do primeiro show não estão sendo aninhados em divs.

fez um violino em funcionamento: http://jsfiddle.net/filever10/dlqpd/

Você pode aprender mais visualizando a fonte aqui: http://jquery.malsup.com/cycle2/demo/nested.php