Pagination : Sync multiple sliders of bxslider onTouchMove

run same controls on multiple slider

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<div id="businessDictionaryWrap">
    <div id="bxslider1Wrap">
        <ul id="bxslider1" class="bxslider">
            <li>
                <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px" />
            </li>
            <li>
                <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px" />
            </li>
            <li>
                <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-54.jpg" height="200px" />
            </li>
            <li>
                <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-01.jpg" height="200px" />
            </li>
            <li>
                <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px" />
            </li>
            <li>
                <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px" />
            </li>
        </ul>
        <div id="slide-counter1"></div>
    </div>
    <div id="bxslider2Wrap">
        <ul id="bxslider2" class="bxslider">
            <li>
                <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/houses.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/trees.jpg" />
            </li>
        </ul>
        <div...

CSS

.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border: solid #fff 5px;
    left: -5px;
    background: #fff;
}

JavaScript

/* Bx */
$('#slide-counter1').prepend('<strong class="current-index"></strong>/');
var slider = $('#bxslider1').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis,
    minSlides: 2,
    maxSlides: 2,
    onSliderLoad: function (currentIndex) {
        $('#slide-counter1 .current-index').text(currentIndex + 1);
    },
    onSlideBefore: function ($slideElement, oldIndex, newIndex) {
        $('#slide-counter1 .current-index').text(newIndex + 1);
    }
});
$('#slide-counter1').append(slider.getSlideCount());

$('#slide-counter2').prepend('<strong class="current-index"></strong>/');
var slider1 = $('#bxslider2').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis,
    auto: true,
    onSliderLoad: function (currentIndex) {
        $('#slide-counter2 .current-index').text(currentIndex + 1);
    },
    onSlideBefore: function ($slideElement, oldIndex, newIndex) {
        $('#slide-counter2 .current-index').text(newIndex + 1);
    }
});
$('#slide-counter2').append(slider.getSlideCount());

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