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 img
está 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 img
está fora do div
s. 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 div
s.
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