同步bxslider onTouchMove的多个滑块

Question

我在一个页面上有 2 个滑块，我想同步它们。我找到了一种在单击外部控件时同步的解决方案，但是如何在左右滑动时触发？

http://jsfiddle.net/vgJ9X/1/

<!-- slider 1 -->
<ul class="bxslider">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
</ul>

<!-- slider 2 -->    
<ul class="bxslider">
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
</ul>

<!-- custom controls -->
<div class="bxslider-controls">
  <a class="pull-left" href="#">PREV</a>
  <a class="pull-right" href="#">NEXT</a>
</div>

---

JS

var slider_array = new Array();

$(document).ready(function ($) {

// launch bxslider
$('.bxslider').each(function (i) {
    slider_array[i] = $(this).bxSlider({
        controls: false
    });
});


// bind controls on custom controls, and run functions on every slider
$('.bxslider-controls a').bind('click', function (e) {
    e.preventDefault();

    if ($(this).hasClass('pull-left')) {
        $.each(slider_array, function (i, elem) {
            elem.goToPrevSlide();
        });

    } else if ($(this).hasClass('pull-right')) {
        $.each(slider_array, function (i, elem) {
            elem.goToNextSlide();
        });
    }
});
});

非常感谢任何帮助。

Answer 1

这是我可以做到的，以使 2 个滑块（具有相同数量的幻灯片）同步。

Fiddle

 var slider = $('.bxslider').bxSlider({
   onSlideNext: doThis,
   onSlidePrev: doThis
 });
 var slider1 = $('.bxslider1').bxSlider({
   onSlideNext: doThis,
   onSlidePrev: doThis
 });

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

我所做的是为其 onSlideNext 和 onSlidePrev 事件分配了一个函数，该函数确保两个滑块移动到相同的索引（这就是我强调相同数量的幻灯片的原因）。

免责声明：我不认可这种方法，也不声称这是一个经过全面测试的解决方案 :) :) :)