多个 jQuery Cycle 2 幻灯片的同步转换答案

【问题标题】：Sync transitions for multiple jQuery Cycle 2 slideshows多个 jQuery Cycle 2 幻灯片的同步转换
【发布时间】：2014-02-02 01:06:53
【问题描述】：

我将 Mike Alsup 的 jQuery Cycle 2 插件 (http://jquery.malsup.com/cycle2/) 用于需要保持同步的多个幻灯片。用于在$(window).load() 上初始化幻灯片的代码是：

$firstSlider.cycle({
  fx: 'scrollHorz',
  speed: 1000,
  timeout: 4000, // Transition every four seconds
  slides: '> .slide',
  swipe: true,
  pauseOnHover: true,
  pager: '.slideshow-nav',
  pagerTemplate: '<li class="ir"><a href="#" title="Go to slide {{slideNum}}">{{slideNum}}</a></li>'
});

$secondSlider.cycle({
  fx: 'scrollHorz',
  timeout: 0, // Start paused
  speed: 1000,
  slides: '> .slide'
});

$thirdSlider.cycle({
  fx: 'scrollHorz',
  timeout: 0, // Start paused
  speed: 1250,
  slides: '> .slide'
});

我使用插件的cycle-before 事件触发$secondSlider 和$thirdSlider，此时$firstSlider 正在进行（自动或当用户单击寻呼机的下一个/上一个按钮时），该事件在转换之前触发：

$firstSlider.on('cycle-before', function(event, opts, outgoingSlideEl, incomingSlideEl, forwardFlag){
  var incoming = $(incomingSlideEl).index() - 1;
  $secondSlider.cycle('goto', incoming);
  $thirdSlider.cycle('goto', incoming);
});

这很好用，但是goto 命令会在幻灯片从最后一张幻灯片移回第一张幻灯片时反向（从左到右）转换。

有没有办法让所有滑块只向前移动，就像 $firstSlider 一样，即使手动触发？

我可以让所有滑块独立使用自动过渡，但我担心它们会立即失去同步。

我意识到我可以删除 $firstSlider 上的自动过渡，而是添加一个 setTimeout() 以使用 goto 命令控制所有滑块 - 这样所有过渡将是相同的方向 - 但滑块仍会向左移动在最后一次转换时从右到右。

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： jquery slideshow sync cycle

【解决方案1】：

似乎让滑块循环的唯一方法是单独触发它们，感觉这不应该是保持过渡方向同步的唯一方法，但它确实有效。

var slideInterval = setInterval(function(){
  if($firstSlider.data('hover') == false){
    $firstSlider.cycle('next');
    $secondSlider.cycle('next');
        $thirdSlider.cycle('next');
  }
}, 5000);

// Patch 'pauseOnHover' behaviour
$firstSlider.data('hover', false);

$firstSlider.hover(function(){
  $firstSlider.data('hover', true);
}, function(){
  $firstSlider.data('hover', false);
});

【讨论】：