slick-image-compare Demos

Is a modern image comparison slider written in vanilla JavaScript and has no dependencies on other libraries. Best for comparing images, image retouching, color adjustments, renderings, etc.

Started as a jQuery-Plugin back in the days (2013) and was used for a custom wordpress-plugin :-)

Default Settings

javascript

data api

<div data-sic>
  <img src="04_before.jpg" alt="before" />
  <img src="04_after.jpg" alt="after" />
</div>

<div id="my-div">
  <img src="04_before.jpg" alt="before" />
  <img src="04_after.jpg" alt="after" />
</div>

const sic = new SlickImageCompare('#my-div');

color grading an image

With own HTML and a start position

you can use your own HTML inside, it will not be overwritten!
startPos is set to 25 (percent from left) data-sic is used to set options via data attribute.

If you want the info-box to appear in the foreground, just use the z-index on that element.

javascript

data api

<div data-sic="startPos:25">
  <img src="05_before.jpg" alt="before" />
  <img src="05_after.jpg" alt="after" />
  <div class="info-box-wrapper">
    <div class="info-box">
      <h1>AUSTRIA</h1>
      <p>Krimml waterfalls</p>
    </div>
  </div>
</div>

<div id="my-div">
  <img src="05_before.jpg" alt="before" />
  <img src="05_after.jpg" alt="after" />
  <div class="info-box-wrapper">
    <div class="info-box">
      <h1>AUSTRIA</h1>
      <p>Krimml waterfalls</p>
    </div>
  </div>
</div>

const sic = new SlickImageCompare('#my-div', {
  startPos: 25
});

AUSTRIA

Krimml waterfalls

color grading an image

Responsive image (via srcset)

The only restriction: the images (before, after) must have exactly the same srcset and sizes attributes. (only the file name should be different). Otherwise it won't work and the wrong images may be loaded - this is especially important if the aspect ratio changes.

javascript

data api

<div data-sic>
  <img
    sizes="(max-width: 1200px) 100vw, 1200w"
    srcset="06_before_sm.jpg 840w, 06_before_md.jpg 1200w"
    src="06_before_sm.jpg"
    alt="deer"
  />
  <img
    sizes="(max-width: 1200px) 100vw, 1200w"
    srcset="06_after_sm.jpg 840w, 06_after_md.jpg 1200w"
    src="06_after_sm.jpg"
    alt="deer"
  />
</div>

<div id="my-div">
  <img
    sizes="(max-width: 1200px) 100vw, 1200w"
    srcset="06_before_sm.jpg 840w, 06_before_md.jpg 1200w"
    src="06_before_sm.jpg"
    alt="deer"
  />
  <img
    sizes="(max-width: 1200px) 100vw, 1200w"
    srcset="06_after_sm.jpg 840w, 06_after_md.jpg 1200w"
    src="06_after_sm.jpg"
    alt="deer"
  />
</div>

const sic = new SlickImageCompare('#my-div');

Deer in the wild (COLOR GRADING)

Responsive image (via <picture> element)

The only restriction: all (before, after) responsive images must have exactly the same size and the media queries must match (see below).

javascript

data api

<div data-sic>
  <picture>
    <source srcset="07_before_sm.jpg" media="(max-width: 639px)" />
    <img src="07_before_md.jpg" alt="" />
  </picture>
  <picture>
    <source srcset="07_after_sm.jpg" media="(max-width: 639px)" />
    <img src="07_after_md.jpg" alt="" />
  </picture>
</div>

<div id="my-div">
  <picture>
    <source srcset="07_before_sm.jpg" media="(max-width: 639px)" />
    <img src="07_before_md.jpg" alt="" />
  </picture>
  <picture>
    <source srcset="07_after_sm.jpg" media="(max-width: 639px)" />
    <img src="07_after_md.jpg" alt="" />
  </picture>
</div>

const sic = new SlickImageCompare('#my-div');

color grading an image

Follow Mouse movement

The slider follows mouse movement (only on desktop devices where a trackpad or mouse is available). The default slider is used on touch devices!

data-sic is used to set the options via data-attribute. Here we use the Object syntax. You can also use a comma-separated list.

javascript

data api

comma-separated list (always use key: 'value'):

<div data-sic="followMouse: true, beforeLabel: 'before', afterLabel: 'after'">
  <img src="01_before.png" alt="before" />
  <img src="01_after.png" alt="after" />
</div>

as object syntax (always use key: 'value'):

<div data-sic="{
    followMouse: true,
    beforeLabel: 'before',
    afterLabel: 'after',
  }">
  <img src="01_before.png" alt="before" />
  <img src="01_after.png" alt="after" />
</div>

<div id="my-div"></div>
  <img src="01_before.png" alt="before" />
  <img src="01_after.png" alt="after" />
</div>

const sic = new SlickImageCompare('#my-div', {
  followMouse: true,
  beforeLabel: 'before',
  afterLabel: 'after'
});

Replacing colors in an image (Transparent PNG)

Snap to Start

if set to true, the slider will animate back to the defined start position when user-interaction ends.

javascript

data api

<div data-sic="{
    snapToStart: true,
    beforeLabel: 'before',
    afterLabel: 'after',
  }">
  <img src="02_after.png" alt="" />
  <img src="02_before.png" alt="" />
</div>

<div id="my-div">
  <img src="02_after.png" alt="" />
  <img src="02_before.png" alt="" />
</div>

const sic = new SlickImageCompare('#my-div', {
  snapToStart: true,
  beforeLabel: 'before',
  afterLabel: 'after',
});

Replacing colors in an image (Transparent PNG)

Advanced Demo with custom options

html:

<div id="adv"></div>

javascript:

const options = {
  beforeImage: '03_before.png',
  afterImage: '03_after.png',
  afterLabel: 'blue',
  beforeLabel: 'pink',
  animateIn: true,
  snapToStart: true,
};

const ba = new sic('#adv', options);

                
                  percent (from ):
                
slider:
smooth

                interaction status: none
              
                orientation:

events: