Sync multiple sliders of bxslider onTouchMove

Question

I have 2 sliders on a page, I want to sync both of them. I found a solution to sync on click of external controls but how do I trigger on swipe left and right?

http://jsfiddle.net/vgJ9X/1/

<!-- slider 1 -->
<ul class="bxslider">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
</ul>

<!-- slider 2 -->    
<ul class="bxslider">
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
</ul>

<!-- custom controls -->
<div class="bxslider-controls">
  <a class="pull-left" href="#">PREV</a>
  <a class="pull-right" href="#">NEXT</a>
</div>

---

JS

var slider_array = new Array();

$(document).ready(function ($) {

// launch bxslider
$('.bxslider').each(function (i) {
    slider_array[i] = $(this).bxSlider({
        controls: false
    });
});


// bind controls on custom controls, and run functions on every slider
$('.bxslider-controls a').bind('click', function (e) {
    e.preventDefault();

    if ($(this).hasClass('pull-left')) {
        $.each(slider_array, function (i, elem) {
            elem.goToPrevSlide();
        });

    } else if ($(this).hasClass('pull-right')) {
        $.each(slider_array, function (i, elem) {
            elem.goToNextSlide();
        });
    }
});
});

Any help greatly appreciated.

Answer 1

This is as much as I can do to get the 2 sliders (with the same number of slides) to be in sync.

Fiddle

 var slider = $('.bxslider').bxSlider({
   onSlideNext: doThis,
   onSlidePrev: doThis
 });
 var slider1 = $('.bxslider1').bxSlider({
   onSlideNext: doThis,
   onSlidePrev: doThis
 });

function doThis(ele, old, newi){
  slider.goToSlide(newi);
  slider1.goToSlide(newi);
}

What I did is assigned a function to its onSlideNext and onSlidePrev events and this function ensured both the sliders moved to the same index (this is why I emphasized on the same number slides).

Disclaimer: I do not endorse this kind of approach nor do I claim that this is a fully tested solution :) :) :)