Multiple Slider

Select via class

Use multiple slider with the same settings (option object)

Slider 1

Slider 2

Sync two slider

You can also synchronize two (or more) sliders with just a bit of extra code

Slider 1

Slider 2

HTML Code for sync two sliders

<div>
  <div id="sync1">
    <img src="/images/04_before.jpg" alt="" />
    <img src="/images/04_after.jpg" alt="" />
  </div>
  <div class="image-caption">Slider 1</div>
</div>

<div>
  <div id="sync2">
    <img src="/images/05_before.jpg" alt="" />
    <img src="/images/05_after.jpg" alt="" />
  </div>
  <div class="image-caption">Slider 2</div>
</div>

JavaScript Code for sync two sliders

import SlickImageCompare from 'slick-image-compare';

const options = { snapToStart: true };
const sync1 = new SlickImageCompare('#sync1', options);
const sync2 = new SlickImageCompare('#sync2', options);
let active = '';

const handleUpdate = (evt, otherSlider) => {
  const id = evt.detail.instance.element.id;
  if (active === '' || active === id.replace('#sync', '')) {
    otherSlider.goto(evt.detail.percent);
  }
};

const handleInteractionStart = (evt) => {
  const id = evt.detail.instance.element.id;
  active = id.replace('#sync', '');
  const otherSlider = active === '1' ? sync2 : sync1;
  otherSlider.stop();
  otherSlider.goto(evt.detail.percent);
};

const handleInteractionEnd = () => {
  active = '';
};

sync1.addEventListener('update', (evt) => handleUpdate(evt, sync2));
sync1.addEventListener('interactionstart', handleInteractionStart);
sync1.addEventListener('interactionend', handleInteractionEnd);

sync2.addEventListener('update', (evt) => handleUpdate(evt, sync1));
sync2.addEventListener('interactionstart', handleInteractionStart);
sync2.addEventListener('interactionend', handleInteractionEnd);