Sync multiple sliders of bxslider onTouchMove

HTML

<script src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<ul 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>

<ul class="bxslider1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

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

/* Sync multiple sliders of bxslider onTouchMove */

var slider = $('.bxslider').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis,
     minSlides: 4,
  maxSlides: 4,
  ticker: true,
  tickerHover: true,
  speed: 60000,
  touchEnabled: true,
  slideWidth: 300
});
var slider1 = $('.bxslider1').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis
});

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