Syncing two flexslider together on touch swipe

Woothemes introduces an awesome jquery slider which is fully responsive and easy to use which is known as flexslider.

There is an option in this plugin for syncing two flexslider with each other which is good but its not working very well for touch devices. On touch devices when we swipe one slider then other slider didn't move with it, so I tweak its library and added some line of code in it to work it for touch swipe. Now when you swipe the first slider the second slider will also moves with it.

Now for syncing you have to first initialise both the sliders like this :

 $(window).load(function() {
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false
  });
   
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});
 

Then go to the flexslider library and copy-paste this code in onTouchMove() function

if (slider.syncExists) {
var $obj = $(slider.vars.sync).data("flexslider");
$obj.setProps(offset + dx, "setTouch");
}

and this code in onTouchEnd() function

if (slider.syncExists) {
var $obj = $(slider.vars.sync).data("flexslider");
$obj.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true);
}

When all setup is done you are good to go.

If any issue occurs feel free to ask.

NOTE : Always initialise the slider to be synced first. And the width of both the slider should be same.