1 | # Image comparison slider for Svelte 3
|
2 |
|
3 | [![NPM version](https://img.shields.io/npm/v/svelte-image-compare.svg?style=flat)](https://www.npmjs.com/package/svelte-image-compare) [![NPM downloads](https://img.shields.io/npm/dm/svelte-image-compare.svg?style=flat)](https://www.npmjs.com/package/svelte-image-compare)
|
4 |
|
5 | Simple Svelte component to compare two images using slider.
|
6 |
|
7 | ![preview](https://react-compare-image.yuuniworks.com/anime.gif)
|
8 |
|
9 | ## Features
|
10 |
|
11 | - Simple
|
12 | - Responsive (fit to the parent width)
|
13 | - Size difference between two images handled correctly. Element size determined by following two factors:
|
14 | - width of the parent
|
15 | - right image's aspect ratio
|
16 |
|
17 | ## Install
|
18 |
|
19 | ```bash
|
20 | npm i svelte-image-compare --save
|
21 | ```
|
22 |
|
23 | ```bash
|
24 | yarn add svelte-image-compare
|
25 | ```
|
26 |
|
27 | CDN: [UNPKG](https://unpkg.com/svelte-image-compare/) | [jsDelivr](https://cdn.jsdelivr.net/npm/svelte-image-compare/) (available as `window.ImageCompare`)
|
28 |
|
29 | ## Usage
|
30 |
|
31 | ```html
|
32 | <ImageCompare
|
33 | before="//placehold.it/600x200/E8117F/FFFFFF"
|
34 | after="//placehold.it/600x200/CCCCCC/FFFFFF"
|
35 | contain={true}
|
36 | >
|
37 | <span slot="before">BEFORE</span>
|
38 | <span slot="after">AFTER</span>
|
39 | </ImageCompare>
|
40 |
|
41 | <script>
|
42 | import ImageCompare from './ImageCompare.svelte';
|
43 | </script>
|
44 | ```
|
45 |
|
46 | If you are **not** using using es6, instead of importing add
|
47 |
|
48 | ```html
|
49 | <script src="/path/to/svelte-image-compare/index.js"></script>
|
50 | ```
|
51 |
|
52 | just before closing body tag.
|
53 |
|
54 | ## API
|
55 |
|
56 | ## Props
|
57 |
|
58 | | Name | Type | Description | Required | Default |
|
59 | | --- | --- | --- | --- | --- |
|
60 | | `before` | `String` | Path to the image image *before* change | Yes | `empty string` |
|
61 | | `after` | `String` | Path to the image image *after* change | Yes | `empty string` |
|
62 | | `offset` | `Number` | How far from the left the slider should be on load (between 0 and 1) | No | `0.5` |
|
63 | | `contain` | `Boolean` | Determines if images are stretched to fill parent element. Can be used with help of CSS `object-fit: cover` to create full page image comparison | No | `false` |
|
64 | | `overlay` | `Boolean` | Show overlay upon images | No | `true` |
|
65 | | `hideOnSlide` | `Boolean` | Hide overlay & labels on sliding | No | `true` |
|
66 |
|
67 | ## Slots
|
68 |
|
69 | - `before` - element to be placed on top of before image (basically a label)
|
70 | - `after` - element to be placed on top of after image (basically a label)
|
71 |
|
72 | ## License
|
73 |
|
74 | MIT © [PaulMaly](https://github.com/PaulMaly) |
\ | No newline at end of file |