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><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" /></li>
<li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" /></li>
<li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-54.jpg" /></li>
<li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-01.jpg" /></li>
<li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" /></li>
<li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.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: #fff;
}
JavaScript
/* Sync multiple sliders of bxslider onTouchMove */
var slider = $('.bxslider').bxSlider({
onSlideNext: doThis,
onSlidePrev: doThis,
minSlides: 2,
maxSlides: 2
});
var slider1 = $('.bxslider1').bxSlider({
onSlideNext: doThis,
onSlidePrev: doThis
});
function doThis(ele, old, newi){
slider.goToSlide(newi);
slider1.goToSlide(newi);
}