Sync transitions for multiple jQuery Cycle 2 slideshows

Question

I'm using Mike Alsup's jQuery Cycle 2 plugin (http://jquery.malsup.com/cycle2/) for multiple slideshows that need to stay in sync. The code used to initialise the slideshows on $(window).load() is:

$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'
});

I trigger $secondSlider and $thirdSlider at the moment $firstSlider progresses (automatically or when the user clicks the pager next/previous buttons) using the plugin's cycle-before event which fires just before the transition:

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

This works quite well, however the goto command will make the slideshow transition in reverse (left-to-right) when it moves from the last slide back to the first.

Is there a way I can have all the sliders move forward only, like $firstSlider does, even when triggered manually?

I could make all sliders use automatic transitions independently but I fear they instantly fall out of sync.

I realise I could remove the automatic transitions on $firstSlider and instead add a setTimeout() to control all sliders with the goto command - that way all transitions would be the same direction - but the sliders would still move left-to-right on that last transition.

Any help is much appreciated. Thanks!

Answer 1

It seems only way to have the sliders loop is to trigger them each individually, which feels like it shouldn't be the only way to keep the transition direction in sync, but it works.

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