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, generative content, 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>
SlickImageCompare.init();
<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');
before after
Italy, Sunrise (color grading)

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>
SlickImageCompare.init();
<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
});
before after

AUSTRIA

Krimml waterfalls

Krimml waterfalls (color grading)

Use a custom angle for the handle

To create a little more dynamic, the angle of the handle can be changed.

javascript
data api
<div data-sic="{beforeLabel: 'color', afterLabel: 'b & w', handleAngle: 8}">
  <img src="08_before.jpg" alt="before" />
  <img src="08_after.jpg" alt="after" />
</div>
SlickImageCompare.init();
<div id="my-div">
  <img src="08_before.jpg" alt="before" />
  <img src="08_after.jpg" alt="after" />
</div>
const sic = new SlickImageCompare('#my-div', {
  beforeLabel: 'color',
  afterLabel: 'b & w',
  handleAngle: 8,
});
before after
Tyrol - City in Austria (COLOR / B&W)

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>
SlickImageCompare.init();
<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>
SlickImageCompare.init();
<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');
Sweden - Stockholm, sunset (color grading)

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>

SlickImageCompare.init();
<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: 'pink',
    afterLabel: 'turquoise',
  }">
  <img src="02_before.png" alt="" />
  <img src="02_after.png" alt="" />
</div>

SlickImageCompare.init();
<div id="my-div">
  <img src="02_before.png" alt="" />
  <img src="02_after.png" alt="" />
</div>

const sic = new SlickImageCompare('#my-div', {
  snapToStart: true,
  beforeLabel: 'pink',
  afterLabel: 'turquoise',
});
Replacing colors in an image (Transparent PNG)

LTR Example

see how the slider behaves, when ltr option is set to 'false' (default value is 'true').

javascript
data api
<div data-sic="{
    beforeLabel: 'real photo',
    afterLabel: 'generated via SD',
    ltr: false,
  }">
  <img src="09_before.jpg" alt="" />
  <img src="09_after.jpg" alt="" />
</div>

SlickImageCompare.init();
<div id="my-div">
  <img src="09_before.jpg" alt="" />
  <img src="09_after.jpg" alt="" />
</div>

const sic = new SlickImageCompare('#my-div', {
  beforeLabel: 'real photo',
  afterLabel: 'generated via SD',
  ltr: false,
});
Compare real Photo with Picture generated via SD

Multiple slider (class)

Use multiple slider with the same settings (option object)

javascript
data api
<div data-sic="{
    snapToStart: true,
    beforeLabel: 'pink 1',
    afterLabel: 'turquoise 1',
  }"
  class="my-class">
  <img src="02_before.png" alt="" />
  <img src="02_after.png" alt="" />
</div>

<div data-sic="{
    snapToStart: true,
    beforeLabel: 'pink 2',
    afterLabel: 'turquoise 2',
  }"
  class="my-class">
  <img src="02_before.png" alt="" />
  <img src="02_after.png" alt="" />
</div>

SlickImageCompare.init();
<div data-sic="{
    beforeLabel: 'pink 1',
    afterLabel: 'turquoise 1',
  }"
  class="my-class">
  <img src="02_before.png" alt="" />
  <img src="02_after.png" alt="" />
</div>

<div data-sic="{
    beforeLabel: 'pink 2',
    afterLabel: 'turquoise 2',
  }"
  class="my-class">
  <img src="02_before.png" alt="" />
  <img src="02_after.png" alt="" />
</div>

new SlickImageCompare('.my-class', {
  snapToStart: true,
});
Replacing colors in an image (Transparent PNG)
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',
  beforeLabel: 'pink',
  afterLabel: 'blue',
  animateIn: true,
  snapToStart: true,
};

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

percent (from ):
 
slider:
handleAngle:
interaction status: none
orientation: 
events: