使用 jQuery Cycle 同步多个滑块答案

【问题标题】：Syncing multiple sliders using jQuery Cycle使用 jQuery Cycle 同步多个滑块
【发布时间】：2012-04-12 03:02:06
【问题描述】：

我在一个项目中使用 jQuery Cycle。你可以看到我的脚本at pastebin。

基本上，三个不同的滑块与相同的方向控件相关联。我希望他们的过渡是同步的。

就目前而言，由于这里有三个单独的滑块实例，因此它们开始同步，但最终不同步 - 有时如果您离开浏览器窗口或其他东西，它们会立即失去同步。这会导致序列出现故障并且通常看起来不正常。我希望所有滑块同时触发，最好链接到.sliderImages 幻灯片。

我尝试创建一个包含其他两个滑块的函数并将其放在 .sliderImages 滑块上的 before 选项中，但这让它变得很不稳定，而且我不知道足够多的 JS 能够进行故障排除。

像往常一样，感谢任何帮助。

谢谢！

【问题讨论】：

将它们全部设置为 timeout: 0 并添加 setInterval("$('.slides').cycle('next')", 3000); 似乎可以同步动画，但会干扰上一张/下一张幻灯片导航。
I've almost got it。幻灯片正确同步，悬停时节目暂停；但是，当鼠标离开.hero 区域时，出了点问题。与其简单地恢复幻灯片放映，它似乎将其他每张幻灯片的速度加倍，或者类似的东西。我确定我只是以某种方式误解了 javascript SetInterval 功能；任何帮助表示赞赏。 I tried this 但无法正常工作。

【解决方案1】：

所以在我的头撞到墙上一段时间后，我偶然发现了Ryan Florence's jQuery Slideshow。它比 Cycle 或我尝试过的任何其他幻灯片插件（即使它需要 jQuery UI）都轻得多（很多，很多），它有很好的文档记录，并且相对容易插入并按照您的意愿开始工作。

有一个thread on his slideshow Github page，他帮助我让代码正常工作，还有一个link to the final code。

当然，如果有人有改进我的代码的建议，我愿意接受。但是这个插件就像它们来的一样简单和多才多艺。

也许是一个比我更适合移动设备的程序员，比如Flexslider...

【讨论】：

【解决方案2】：

如果您使用 (window).load 函数来加载 jquery 循环并使用具有相同选项的两个不同选择器，那么您应该使两个滑块完全同步。

如果您将它们作为两个单独的 init 加载并且如果您在准备好的情况下加载它们，我认为时间将会关闭。

无论如何，它对我有用。

【讨论】：

自从我构建它已经有一段时间了，但我记得，我尝试在同一个 init 上使用两个不同的选择器，但它们最终会不同步。此外，我试图为每个滑块使用不同的过渡，这使得使用单个 init 对我来说更加困难（尽管我不是 JS 专家，所以可能有一个简单的解决方案）。
还应该注意的是，最新版本的 FlexSlider 现在提供了类似的播放/暂停挂钩，因此您也可以使用 setTimeout 来同步两个（或更多）具有不同过渡的滑块。当我建立这个网站时，FlexSlider 在这方面非常有限。（尽管您仍然无法创建自己的过渡...）