有一些问题
首先,在周期2中,嵌套幻灯片应该看起来像这样:
<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>
重要的是,幻灯片都应该是相同的标签,例如 img img img
或者 div div div
不是 img div img
. 。因此,您需要包装第一级幻灯片 img
s内部。因为他们现在不是 img
, ,这是默认值,您需要设置 data-cycle-slides="> div"
在外部幻灯片上。
此外,您还需要内部幻灯片放在DIV内部, <div><div class="cycle-slideshow inner-slideshow">
而不是只是 <div class="cycle-slideshow inner-slideshow">
. 。幻灯片可以嵌套,但不能越过剑。
您示例中当前正在发生的事情是,它正在一起运行两个幻灯片,使用相同的下一步和两个节目的prev按钮,并撕裂 img
S退出 div
s。因此,您不必运行2个嵌套幻灯片,而是运行2个并发幻灯片,其中一个恰好在另一个内部,这是幻灯片的副产品,直接相互接触,而第一场表演的幻灯片未嵌套在 div
s。
做一个工作的小提琴: http://jsfiddle.net/filever10/dlqpd/
您可以通过在此处查看来源了解更多信息: http://jquery.malsup.com/cycle2/demo/nested.php