jQuery cycle2 幻灯片嵌套幻灯片“下一个”和“上一个”按钮

jquery cycle2 slideshow nested slideshow next and prev buttons

本文关键字：上一个 下一个 幻灯片 按钮 cycle2 jQuery 嵌套      更新时间：2023-09-26

我使用 cycle2 插件来显示由一些图像和另一个幻灯片组成的幻灯片。内部幻灯片的下一个和上一个按钮由于某种原因（在示例中向上和向下）不起作用，尽管恕我直言，它们已正确设置：

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/

有几个问题

首先，在周期 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包裹在divs内部。由于它们现在不是 img ，这是默认设置，您需要在外部幻灯片上设置data-cycle-slides="> div"。

此外，您还需要您的内部幻灯片也位于div 内部，例如 <div><div class="cycle-slideshow inner-slideshow"> 而不仅仅是 <div class="cycle-slideshow inner-slideshow"> .幻灯片可以嵌套，但不能交叉剑。

您的示例中当前发生的事情是，它同时运行两个幻灯片，对两个节目使用相同的下一个和上一个按钮，并将img从div中撕下来。因此，您不是运行 2 个嵌套幻灯片，而是运行 2 个并发幻灯片，其中一个恰好在另一个内部，这是幻灯片直接相互接触的副产品，并且第一个节目的幻灯片没有嵌套在 div 秒中。

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

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

相关文章：