slick-image-compare/README.md

before and after image comparison slider

<!-- PROJECT SHIELDS -->
[![MIT License][license-shield]][license-url]

# slick image compare
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...

[![demo](https://raw.githubusercontent.com/lemon3/slick-image-compare/main/_assets/image-compare.gif)](https://lemon3.github.io/slick-image-compare/)

## Docs
**[Read the documentation >>](https://slick-image-compare-docs.onrender.com/)**

## tl;dr
### Module
install the package
```Bash
pnpm add slick-image-compare
```
html code
```html
<div id="my-div"></div>
```
use it in your code
```js
import SlickImageCompare from 'slick-image-compare';
import 'slick-image-compare/style';

const options = {
  beforeImage: 'before.jpg',
  afterImage: 'after.jpg',
};

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

### Classic
```html
<link rel="stylesheet" href="https://unpkg.com/slick-image-compare/dist/slick-image-compare.css">
<script src="https://unpkg.com/slick-image-compare"></script>

<div id="my-div" style="max-width:640px">
  <img src="before.jpg" alt="before image" />
  <img src="after.jpg" alt="after image" />
</div>

<script>
  const sic = new SlickImageCompare('#my-div');
</script>
```

<!-- MARKDOWN LINKS & IMAGES -->
[license-shield]: https://img.shields.io/github/license/lemon3/slick-image-compare?style=for-the-badge
[license-url]: https://github.com/lemon3/slick-image-compare/blob/main/LICENSE