Question

我正在使用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'
});

我$secondSlider和$thirdSlider在$firstSlider进展时（自动或当用户点击寻呼机下一个/上一个按钮时）使用插件的cycle-before事件触发就在转型之前：

$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来控制所有滑块 - 这样所有转换都是相同的方向 - 但是滑块在最后一次转换时仍会从左向右移动。

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

Answer 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);
});

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

1 个答案: