Sync multiple sliders of bxslider onTouchMove

by HYEONGJINKIM

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<ul class="bxslider" >
    <li> <img src="http://www.websiteoptimization.com/speed/tweak/png-optimization/banner_homefireworkscs4png8alpha.png" height="200px"/></li>
    <li> <img src="http://alpha-pure.com/sites/default/files/banner-oilwater3.png" height="200px"/></li>
    <li><img src="http://www.lottelem.co.kr/eng/images/main_visual/total_model.png" height="200px"/></li>
    <li><img src="https://image.freepik.com/free-vector/floating-forms-on-a-transparent-background_1035-6752.jpg" height="200px"/></li>
    <li>  <img src="http://vignette3.wikia.nocookie.net/creepypasta/images/8/81/Flareon_transparent_background.png/revision/latest?cb=20121214214748" 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{    
    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)";
}

.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;
    
}

JavaScript

/* Sync multiple sliders of bxslider onTouchMove */

var slider = $('.bxslider').bxSlider({
infiniteLoop: true,
		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({
infiniteLoop: true,
		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);
    //slider.goToNextSlide();
    //slider1.goToNextSlide();
}