https://github.com/mitscherlich/vue-image-compare-viewer
Aka vue version of [image-compare-viewer](https://github.com/kylewetton/image-compare-viewer)
https://github.com/mitscherlich/vue-image-compare-viewer
Last synced: 7 months ago
JSON representation
Aka vue version of [image-compare-viewer](https://github.com/kylewetton/image-compare-viewer)
- Host: GitHub
- URL: https://github.com/mitscherlich/vue-image-compare-viewer
- Owner: Mitscherlich
- License: mit
- Created: 2022-03-19T16:33:16.000Z (over 4 years ago)
- Default Branch: dev
- Last Pushed: 2023-11-01T09:55:57.000Z (over 2 years ago)
- Last Synced: 2024-12-29T19:58:21.125Z (over 1 year ago)
- Language: CSS
- Homepage: https://mitscherlich.github.io/vue-image-compare-viewer/
- Size: 3.7 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-image-compare-viewer
> Aka vue version of [image-compare-viewer](https://github.com/kylewetton/image-compare-viewer)
A MODERN, LIGHTWEIGHT COMPARISON SLIDER
Compare before and after images, for grading, CGI and other retouching comparisons.
```bash
$ npm install vue-image-compare-viewer --save
```
## HOW TO USE
### Basic example
```html
```
### UI THEME OPTIONS
**ImageCompareViewer** will keep all other elements in the container, as long as you add a **`keep`** class to it, allowing you to place other elements inside the viewer, just remember to set your `z-index` above 10, this example also uses the CSS property `'user-select: none'`.
```html
```
### LABELS
You can style these labels using **`.icv__label`** for both, and **`.icv__label-before`**, **`.icv__label-after`** for the individual labels.
```html
```
### DISABLE SMOOTHING
Smoothing is automatically disabled on touch enabled screens.
```html
```
### INCREASE SMOOTHING
Milliseconds – a higher number means more dampening
```html
```
### START ON HOVER
Clicking will activate manual control.
```html
```
### VERTICAL MODE
Vertical mode is mobile friendly!
```html
```
### STARTING POINT
The percentage to show of the *before* image.
```html
```
### FLUID MODE
Fluid mode enables the container to have fluid height and width, independent of each other, useful for using Image Compare Viewer in a full screen container for instance. The image is dynamically cropped using the CSS background 'cover' property.
```html
```
## Options
| props | description | type | required | default |
|:----- |:----------- |:---- |:--------:|:------- |
| container | the container viewer element | string \| HTMLElement | no | -- |
| before | the before image | string \| slot | yes | -- |
| after | the after image | string \| slot | yes | -- |
| controlColor | the controller color | string | no | #fff |
| controlShadow | add shadow to controller | bool | no | true |
| addCircle | add circle to controller | bool | no | false |
| addCircleBlur | add blur to controller circle | bool | no | true |
| showLabels | show labels | bool | no | false |
| labelOptions | the label options | object | no | { before: 'Before', after: 'After', onHover: false } |
| smoothing | if controller move smoothly, automatically disabled on touch enabled screens | bool | no | true |
| smoothingAmount | milliseconds – a higher number means more dampening | number | no | 100 |
| hoverStart | hover to move the controller on start | bool | no | false |
| verticalMode | enable vertical mode | bool | no | false |
| startingPoint | the percentage to show of the before image | number | no | 50 |
| fluidMode | enables the container to have fluid height and width | bool | no | false |
## License
[MIT](https://github.com/Mitscherlich/vue-image-compare-viewer/LICENSE)