comparison-slider

comparison-slider

Comparing two images. No dependencies.

Example

• basic
• auto (easiest!)
• basic
• responsive
• responsive-keep-aspect
• custom

Usage

<div class="ComparisonSlider">
  <div
    class="ComparisonSlider__Before"
    style="background-image: url(./img-a.jpg)"
  ></div>
  <div
    class="ComparisonSlider__After"
    style="background-image: url(./img-b.jpg)"
  ></div>
</div>

Declare the height of the view.

.ComparisonSlider {
  width: 600px;
  height: 400px;
}

then...

As a module

import ComparisonSlider from 'comparison-slider';
const comparisonSlider = new ComparisonSlider();

in browser

<script src="path/to/comparison-slider.min.js"></script>
<script>
const comparisonSlider = new ComparisonSlider();
</script>