2

我已经在网站上的几张幻灯片上成功实现了 cycle2 插件，包括一个嵌套幻灯片。我有所有简单、明显的东西都在工作，但是在我头上的一个高级位上遇到了一些麻烦。

我有一个嵌套幻灯片。类别幻灯片显示单个幻灯片。我在父幻灯片上有寻呼机导航，在每个内部幻灯片上有下一个/上一个导航。我在使用循环之前已经完成了这个设置，我在循环版本上工作的一件事是一些 js，它会导致只有当前活动的内部节目正在运行。这是我这次无法解决的问题。

发生的情况是，当 category1 首次加载时， cat1 内部幻灯片会继续进行。他们在自动前进以及下一个/上一个。但是，如果我然后单击 category2，则 cat2 内部幻灯片与 cat1 在我离开它们时所在的位置相同。但是，这适用于您翻页的类别。无论您是在等待它们自动前进还是使用下一个/上一个导航，所有内部幻灯片的进度都是相同的。我希望发生的是 category1 加载，您浏览一下它们，然后单击另一个类别，当新的内部幻灯片集加载时，它们从自己的集合的开头开始。因此，如果我正在查看幻灯片 2.3，然后单击 category4，我接下来看到的是 4.1，而不是 4.3。理想情况下，我希望每个内部幻灯片在您离开时暂停，所以如果你回到它，你会从你离开的地方开始。但至少我希望他们不要在看不见的情况下继续前进。

Malsup 的网站上有一个嵌套幻灯片的示例，但是源代码中的 js 有点让我头疼。我可以知道它在做什么，主要是（当每个子幻灯片完成时，它会自动从 parent1 前进到 parent2 到 parent3，并且子幻灯片只运行一次然后关闭），但我无法整理 js 和各种可用的命令和事件足以为我想要实现的目标推出我自己的解决方案。新版本显然太新了，以至于我无法在某个地方找到答案，我可以从中挑选并找出答案。;-)

var outer = $('.catdisplay');
var inners = $('.portfolioslides');

$('.catdisplay').on('cycle-before', function(e, opts) {
    // ignore bubbled events from inner slideshows
    if (e.target !== this)
        return;
    inners.cycle('pause');
});
$('.catdisplay').on('cycle-after', function (e, opts) {
    inners.cycle();
});

这是我试图解决这个问题的非常糟糕的jsfiddle 。

谢谢！！

4

1 回答 1

0

发生这种情况的原因是所有的内在循环都在同时进行。

首先，我将除 category1 之外的所有嵌套幻灯片设置为data-cycle-paused="true"暂停启动它们。

接下来，我将嵌套幻灯片中的寻呼机设置为具有不同的类。当它们都具有相同的类时，您单击“下一步”，它会将具有该寻呼机类的每个幻灯片移动到下一个幻灯片。如果它们都是唯一的，那么它将只控制移动当前幻灯片。

看到这个更新的 jsfiddle

于 2013-10-04T17:03:04.793 回答