Question

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

<!-- 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事件分配了一个函数，这个函数确保两个滑块都移动到相同的索引（这就是我强调相同数字幻灯片的原因）。

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

同步bxslider onTouchMove的多个滑块

1 个答案: