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

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!