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

Question

我使用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/

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.所以你需要img在div中包装你的第一级幻灯片.由于它们现在不是img,默认情况下,您需要data-cycle-slides="> div"在外部幻灯片放映上进行设置.

此外,您还需要内部幻灯片显示在div内部,<div><div class="cycle-slideshow inner-slideshow">而不仅仅是<div class="cycle-slideshow inner-slideshow">.幻灯片可以嵌套,但不能交叉剑.

你的例子当前正在发生的事情是,它正在同时运行两个幻灯片,使用两个节目的相同的next和prev按钮,并从imgs中删除divs.因此,不是运行2个嵌套幻灯片,而是运行2个并发幻灯片,其中一个恰好在另一个内部,这是幻灯片直接相互接触的副产品,第一个节目的幻灯片没有嵌套在divs中.

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

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