Synchronized carousels while dragging

Question

I have two carousel sliders in a page, I'm using slick to make the swipe event and I want that when you swipe one carousel, the other carousel swipes too. I've achieved that, but there is a detail that would be great to implement. First look at this fiddle:

http://jsfiddle.net/eqreem8m/1/

$(document).ready(function(){
  $('.slider').slick({
  });

  // On swipe event
  $('.slider').on('swipe', function(event, slick, direction){
    var current = $(this).attr('data-slider');
    if (direction=='left') {
        $('.slider:not([data-slider=' + current + '])').slick('slickNext');
    } 
    else if (direction == 'right') {
        $('.slider:not([data-slider=' + current + '])').slick('slickPrev');
    }

  });    
});

I'd want that when you are dragging a slide in a carousel, the other carousel do that same dragging and be 100% synchronized.

I've had a look at the slick documentation but I didn't find anything to do this, so if you know any solution (even with other library) I'd want to read it.

Answer 1

Finally I achieved it changing the slick.js library, applying the function that animate the dragging to both sliders instead of just the slider with the focus, like @julo0ss suggested in his comment.

Here is the fiddle: http://jsfiddle.net/eqreem8m/21/

And now i'll explain what I did, basically there are some lines where the library originally applies the transformation and transition properties to the current slider, stored in the _.$slideTrack variable.

To obtain the synchronized sliders, i've changed the _.$slideTrack.css({...}) to $('.slick-track').css({...}). The methods and lines where I did this:

Note: .slick-track is an element that Slick introduces wrapping the slides

Slick.prototype.animateSlide

This function performs the final transition when you drop the slide.

Line 325

Original:

_.$slideTrack.css(animProps);

Sync:

$('.slick-track').css(animProps); 

Slick.prototype.applyTransition

This function applies the css transition properties to the sliders

Line 360

Original:

_.$slideTrack.css(transition);

Sync:

$('.slick-track').css(transition);

Slick.prototype.disableTransition

This function removes the css transition properties from the sliders

Line 828

Original:

_.$slideTrack.css(transition);

Sync:

$('.slick-track').css(transition);

Slick.prototype.setCSS

This function applies css transform properties to the sliders, it's called while you are dragging the slide

Line 1541

Original:

_.$slideTrack.css(positionProps);

Sync:

$('.slick-track').css(positionProps);

I'm sure that there are better ways to do it, and changing the library code is not a good practice. So feel free to improve it :)