Javascript jquery cycle2幻灯片放映嵌套幻灯片放映下一个和上一个按钮

我使用cycle2插件来显示由一些图像和另一个幻灯片组成的幻灯片。内部幻灯片放映的“下一步”和“上一步”按钮由于某些原因（在本例中为“上下”）不起作用，尽管它们已正确设置为IMHO:

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

及

向上滚动

要查看更多信息，请向下滚动

我怎样才能让它们工作

---

这里有一个演示：

有几个问题

首先，在循环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包装在divs中。由于它们现在不是默认的

img

，因此需要在外部幻灯片上设置

data cycle slides=“>div”

此外，您还需要将内部幻灯片也放在div中，比如

，而不仅仅是

。幻灯片可以嵌套，但不能交叉播放

您的示例目前正在同时运行两个幻灯片，对两个节目使用相同的“下一个”和“上一个”按钮，并将

img

s从

div

s中剥离出来。因此，您不是运行两个嵌套幻灯片，而是运行两个并发幻灯片，其中一个恰好位于另一个幻灯片的内部，这是幻灯片直接相互接触以及第一个放映的幻灯片未嵌套在

div

s中的副产品

做了一把小提琴：

---

您可以通过查看此处的来源了解更多信息：

这解决了循环问题范围之外的许多其他问题，并使事情变得更简单。因为有人喜欢上面的小提琴。我添加了一些注释，并对其进行了一些清理。

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