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!