Question

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

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

发生的事情是，当category1首次加载时，cat1内部会滑动进度。它们是自动前进以及下一个/上一个。但是，如果我然后点击category2，则cat2内部幻灯片位于cat1滑入的位置，当我离开它们时。然而，这适用于您翻页的类别。无论您是在等待它们自动前进还是使用next / prev nav，所有内部幻灯片的进度都是相同的。我想要发生的是，category1加载，你仔细查看它们，然后你点击另一个类别，当新的内部幻灯片加载时，它们从他们自己的集合的开头开始。因此，如果我查看幻灯片2.3，并点击类别4，我接下来看到的是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();
});

Here is the jsfiddle我很难解决这个问题。

谢谢！

Answer 1

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

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

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

See this updated jsfiddle

暂停Cycle2中的嵌套幻灯片

1 个答案: