Is there a way to synchronise 2 sliders with JQuery cycle 2? - jquery-cycle2

Question

Is it possible to do this?
http://jquery.malsup.com/cycle2/
would you have to use a callback event?
Thanks

Answer 1

Of course, check out the demo Synchronized Slideshows
HTML
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-reverse=true
data-cycle-timeout=0
data-index=1
>
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
</div>
<div class="cycle-slideshow"
data-cycle-fx=scrollVert
data-cycle-timeout=0
data-index=2
>
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
</div>
<div class="cycle-slideshow"
data-cycle-fx=scrollVert
data-cycle-timeout=0
data-cycle-reverse=true
data-index=4
>
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
</div>
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-index=3
>
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
</div>
</div>
JS
<script>
(function() {
"use strict";
var slideshows = $('.cycle-slideshow');
// optional: sort the slideshow collection based on the value of the data-index attribute
Array.prototype.sort.call( slideshows, function(a, b) {
a = $(a).data('index'), b = $(b).data('index');
return a < b ? -1 : a > b ? 1 : 0;
});
// bind to cycle-after to trigger next slideshow's transition
$('#container').on('cycle-after', function(e) {
var index = slideshows.index(e.target);
transitionNext(index);
});
// trigger the initial transition after 1 second
setTimeout(transitionNext, 1000);
function transitionNext( index ) {
if (index === undefined || index == slideshows.length -1 )
index = 0;
else
index++;
slideshows.eq(index).cycle('next');
}
})();
</script>
The solution is using: data-index=#
Hope this helps, Cheers!