Sync multiple sliders of bxslider onTouchMove

by HYEONGJINKIM

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><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>

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: rgb(0, 0, 0);
    background: rgba(0,0,0,0);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

JavaScript

/* Sync multiple sliders of bxslider onTouchMove */

var slider = $('.bxslider').bxSlider({
		touchEnabled: true,
    onSlideNext: doThis,
    onSlidePrev: doThis,
     minSlides: 2,
  maxSlides: 2,
  pager:false,
  onSliderLoad: function(currentIndex){
  $('.bxslider').parents('.bx-wrapper').css('zIndex', 1000)
  }
});
var slider1 = $('.bxslider1').bxSlider({
		mode: 'fade',
    onSlideNext: doThis,
    onSlidePrev: doThis,
    pager:false,
    onSliderLoad: function(currentIndex){
    $('.bxslider1').parents('.bx-wrapper').css('zIndex', 900)
    	$('.bxslider1').parents('.bx-wrapper').css('marginTop', -$('.bxslider').parents('.bx-wrapper').height());
      
      
    }
});

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