Feature: Synchronization

Synchronize Multiple Sliders

Sometimes there is a need to have multiple sliders on a single page.

For instance, a large image gallery slider usually has smaller preview-thumbnails that serve as a form of navigation. When the large image slider updates, it should update the thumbnail slider. Likewise, clicking on a thumbnail should show navigate to the relevant image in the main slider.

Note: This demo coming soon.

Usage

In the targets option, you should fill in the names of the variables of the other sliders you want to broadcast updates to.

For example:

var thumb_el = document.getElementById('thumbnail-slider'),
  main_el = document.getElementById('main-slider');

var thumbs = new Bee3D(thumb_el, {
  effect: 'classic',
  listeners: {
    clicks: true
  },
  sync: {
    enabled: true,
    targets: ['main'] // var main = ...
  }
};

var main = new Bee3D(main_el, {
  effect: 'concave',
  listeners: {
    keys: true,
    clicks: true
  },
  sync: {
    enabled: true,
    targets: ['thumbs'] // var thumbs
  }

Now, every time the main slider updates, it will also force the thumbs slider to update. The thumbs slider will also force the main slider to update, too.

Listeners

Since a single slider can update multiple other sliders at once, there is no need to assign the same listeners across all sliders.

A single slider, with all listeners enabled, will act on behalf of all its targets. This is also true for autoplay!

var slider1 = new Bee3D(elem1, {options});
var slider2 = new Bee3D(elem2, {options});
var slider3 = new Bee3D(elem3, {options});
var slider4 = new Bee3D(elem4, {options});
var slider5 = new Bee3D(elem5, {
  // ...
  listeners: {
    keys: true,
    touches: true,
    drag: true
  },
  autoplay: {
    enabled: true,
    speed: 2500
  },
  loop: {
    enabled: true
  },
  sync: {
    enabled: true,
    targets: ['slider1', 'slider2', 'slider3', 'slider4']
  }
});

In this setup, slider5 will pickup all keys, touches, and drag inputs and update sliders 1-4.

Every 2.5s (2500ms) slider5's autoplay feature will trigger the next slide, and all the other sliders' next slides.

Lastly, when slider5 reaches the last slide and loops back to the first slide, all the other sliders will also loop back to the first slide.