jQuery Cycle2幻灯片嵌套的幻灯片下一个和prev按钮

Question

我使用Cycle2插件显示由一些图像和另一个幻灯片显示的幻灯片。内部幻灯片的下一个和prev按钮由于某种原因（在示例中为上下）不起作用，尽管它们已正确设置了IMHO：

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

和

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

我该如何使它们工作？

这是一个演示： http://jsfiddle.net/fku2l/22/

Answer 1

有一些问题

首先，在周期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. 。因此，您需要包装第一级幻灯片 imgs内部。因为他们现在不是 img, ，这是默认值，您需要设置 data-cycle-slides="> div" 在外部幻灯片上。

此外，您还需要内部幻灯片放在DIV内部， <div><div class="cycle-slideshow inner-slideshow"> 而不是只是 <div class="cycle-slideshow inner-slideshow">. 。幻灯片可以嵌套，但不能越过剑。

您示例中当前正在发生的事情是，它正在一起运行两个幻灯片，使用相同的下一步和两个节目的prev按钮，并撕裂 imgS退出 divs。因此，您不必运行2个嵌套幻灯片，而是运行2个并发幻灯片，其中一个恰好在另一个内部，这是幻灯片的副产品，直接相互接触，而第一场表演的幻灯片未嵌套在 divs。

做一个工作的小提琴： http://jsfiddle.net/filever10/dlqpd/

您可以通过在此处查看来源了解更多信息： http://jquery.malsup.com/cycle2/demo/nested.php