0

Does anyone know how I can accomplish this: I am referencing the flexslider plugin which you can view here: http://flex.madebymufffin.com/

3 Flexslider containers -

$(window).load(function () {
        $('#primary-slider').flexslider({
         animation: 'slide',
         controlNav: false
     });
     $('#secondary-slider').flexslider({
         animation: 'slide',
         slideDirection: "vertical",
         controlNav: false,
         directionNav: false
    });
    $('#tertiary-slider').flexslider({
        animation: 'slide',
        controlNav: false,
        directionNav: false
    });
});

They each contain 3 images, total of 9 different images: [1a.jpg, 1b.jpg, 1c.jpg], [2a.jpg, 2b.jpg, 2c.jpg], [3a.jpg, 3b.jpg, 3c.jpg].

On initialization they are all synced up and it's perfect.

The challenge, which I am hoping someone can figure out, is if you click / swipe next or previous image on any of the containers, the images should move in the same manner on the other 2 containers. So if you are on container 1 and swipe from 1a.jpg to 2a.jpg, in containers 2 and 3 the same should happen...going from 2a.jpg to 2b.jpg, and respectively for the 3rd container. Likewise, going backwards on any of the containers should echo the same effect on the other 2 containers. I think I am overthinking this and someone with a fresh set of eyes will know exactly what to do...

Any help is much appreciated!

Jono

J0NNY ZER0
  • 707
  • 2
  • 13
  • 32
  • This sounds like what you're going for: http://stackoverflow.com/questions/10171709/flex-slider-how-to-add-same-controls-for-two-sliders – Greg Haygood May 10 '12 at 03:18

1 Answers1

1

I think this can now be accomplished with Flexslider 2 using the sync property.

sync: "",    //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
Adi Lester
  • 24,731
  • 12
  • 95
  • 110
alexandria757
  • 81
  • 2