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

is possible this?

http://jquery.malsup.com/cycle2/

would have use callback event?

thanks

of course, check out 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 slideshow collection based on value of data-index attribute array.prototype.sort.call( slideshows, function(a, b) {     = $(a).data('index'), b = $(b).data('index');     return < b ? -1 : > b ? 1 : 0; });  // bind cycle-after trigger next slideshow's transition $('#container').on('cycle-after', function(e) {     var index = slideshows.index(e.target);     transitionnext(index); });  // trigger 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 using: data-index=#

hope helps, cheers!