0

I have 2 sliders on a page, I want to sync both of them. I found a solution to sync on click of external controls but how do I trigger on swipe left and right?

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();
        });
    }
});
});

Any help greatly appreciated.

itsMe
  • 623
  • 3
  • 9
  • 23

1 Answers1

5

This is as much as I can do to get the 2 sliders (with the same number of slides) to be in sync.

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

What I did is assigned a function to its onSlideNext and onSlidePrev events and this function ensured both the sliders moved to the same index (this is why I emphasized on the same number slides).

Disclaimer: I do not endorse this kind of approach nor do I claim that this is a fully tested solution :) :) :)

VJS
  • 1,017
  • 9
  • 21
  • The only issue with this is that it slides the wrong direction on the first or last slides. – Josh Warren Jun 28 '16 at 04:47
  • Simple approach to address that, 5 just needs to be the index of your last slide: `function doThis(ele, old, newi){ if(old == 0 && newi == 5) { slider.goToPrevSlide(); slider1.goToPrevSlide(); } else if(old == 5 && newi = 0) { slider.goToNextSlide(); slider1.goToNextSlide(); } else { slider.goToSlide(newi); slider1.goToSlide(newi); } }` – Josh Warren Jun 28 '16 at 04:55