{"id":18801853,"url":"https://github.com/mitscherlich/vue-image-compare-viewer","last_synced_at":"2026-01-04T17:30:16.073Z","repository":{"id":135788103,"uuid":"471752046","full_name":"Mitscherlich/vue-image-compare-viewer","owner":"Mitscherlich","description":"Aka vue version of [image-compare-viewer](https://github.com/kylewetton/image-compare-viewer)","archived":false,"fork":false,"pushed_at":"2023-11-01T09:55:57.000Z","size":3883,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2024-12-29T19:58:21.125Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mitscherlich.github.io/vue-image-compare-viewer/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mitscherlich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-19T16:33:16.000Z","updated_at":"2022-03-20T15:37:06.000Z","dependencies_parsed_at":"2023-04-27T21:31:52.406Z","dependency_job_id":"8049d448-0338-4e48-8544-dcdbe58aba5c","html_url":"https://github.com/Mitscherlich/vue-image-compare-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitscherlich%2Fvue-image-compare-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitscherlich%2Fvue-image-compare-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitscherlich%2Fvue-image-compare-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitscherlich%2Fvue-image-compare-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mitscherlich","download_url":"https://codeload.github.com/Mitscherlich/vue-image-compare-viewer/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239734644,"owners_count":19688257,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T22:25:30.264Z","updated_at":"2026-01-04T17:30:16.020Z","avatar_url":"https://github.com/Mitscherlich.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-image-compare-viewer\n\n\u003e Aka vue version of [image-compare-viewer](https://github.com/kylewetton/image-compare-viewer)\n\nA MODERN, LIGHTWEIGHT COMPARISON SLIDER\n\nCompare before and after images, for grading, CGI and other retouching comparisons.\n\n```bash\n$ npm install vue-image-compare-viewer --save\n```\n\n## HOW TO USE\n\n### Basic example\n\n\u003cImageCompareViewer before=\"/assets/before-0.jpg\" after=\"/assets/after-0.jpg\" /\u003e\n\n```html\n\u003cImageCompareViewer before=\"...\" after=\"...\" /\u003e\n```\n\n### UI THEME OPTIONS\n\n**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'`.\n\n\u003cImageCompareViewer\n  before=\"/assets/before-cgi.jpg\"\n  after=\"/assets/after-cgi.jpg\"\n  control-color=\"#73c781\"\n  :control-shadow=\"false\"\n  add-circle\n  add-circle-blur\n/\u003e\n\n```html\n\u003cImageCompareViewer\n  before=\"...\"\n  after=\"...\"\n  control-color=\"#73c781\"\n  :control-shadow=\"false\"\n  add-circle\n  add-circle-blur\n/\u003e\n```\n\n### LABELS\n\nYou can style these labels using **`.icv__label`** for both, and **`.icv__label-before`**, **`.icv__label-after`** for the individual labels.\n\n\u003cImageCompareViewer\n  before=\"/assets/interior-clay.jpg\"\n  after=\"/assets/interior-render.jpg\"\n  show-labels\n  :label-options=\"{\n    before: 'Clay',\n    after: 'Final render',\n    onHover: false // default\n  }\"\n/\u003e\n\n```html\n\u003cImageCompareViewer\n  before=\"...\"\n  after=\"...\"\n  show-labels\n  :label-options=\"{\n    before: 'Clay',\n    after: 'Final render',\n    onHover: false // default\n  }\"\n/\u003e\n```\n\n### DISABLE SMOOTHING\n\nSmoothing is automatically disabled on touch enabled screens.\n\n\u003cImageCompareViewer before=\"/assets/before-2.jpg\" after=\"/assets/after-2.jpg\" :smoothing=\"false\" /\u003e\n\n```html\n\u003cImageCompareViewer before=\"...\" after=\"...\" :smoothing=\"false\" /\u003e\n```\n\n### INCREASE SMOOTHING\n\nMilliseconds – a higher number means more dampening\n\n\u003cImageCompareViewer before=\"/assets/before-4.jpg\" after=\"/assets/after-4.jpg\" :smoothing-amount=\"300\" /\u003e\n\n```html\n\u003cImageCompareViewer before=\"...\" after=\"...\" :smoothing-amount=\"300\" /\u003e\n```\n\n### START ON HOVER\n\nClicking will activate manual control.\n\n\u003cImageCompareViewer\n  before=\"/assets/before-9.jpg\"\n  after=\"/assets/after-9.jpg\"\n  add-circle\n  add-circle-blur\n  hover-start\n/\u003e\n\n```html\n\u003cImageCompareViewer before=\"...\" after=\"...\" hover-start /\u003e\n```\n\n### VERTICAL MODE\n\nVertical mode is mobile friendly!\n\n\u003cImageCompareViewer before=\"/assets/before-6.jpg\" after=\"/assets/after-6.jpg\" vertical-mode style=\"height: 885px\" /\u003e\n\n```html\n\u003cImageCompareViewer before=\"...\" after=\"...\" vertical-mode /\u003e\n```\n\n### STARTING POINT\n\nThe percentage to show of the *before* image.\n\n\u003cImageCompareViewer before=\"/assets/before-7.jpg\" after=\"/assets/after-7.jpg\" :starting-point=\"75\" /\u003e\n\n```html\n\u003cImageCompareViewer before=\"...\" after=\"...\" :starting-point=\"75\" /\u003e\n```\n\n### FLUID MODE\n\nFluid 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.\n\n```html\n\u003cImageCompareViewer\n  before=\"...\"\n  after=\"...\"\n  fluid-mode\n  style=\"width: 100%; height: 66vh;\"\n/\u003e\n```\n\n\u003cImageCompareViewer\n  before=\"/assets/before-5.jpg\"\n  after=\"/assets/after-5.jpg\"\n  fluid-mode\n  style=\"width: 100%; height: 66vh;\"\n/\u003e\n\n## Options\n\n| props | description | type | required | default |\n|:----- |:----------- |:---- |:--------:|:------- |\n| container | the container viewer element | string \\| HTMLElement | no | -- |\n| before | the before image | string \\| slot | yes | -- |\n| after | the after image | string \\| slot | yes | -- |\n| controlColor | the controller color | string | no | #fff |\n| controlShadow | add shadow to controller | bool | no | true |\n| addCircle | add circle to controller | bool | no | false |\n| addCircleBlur | add blur to controller circle | bool | no | true |\n| showLabels | show labels | bool | no | false |\n| labelOptions | the label options | object | no | { before: 'Before', after: 'After', onHover: false } |\n| smoothing | if controller move smoothly, automatically disabled on touch enabled screens | bool | no | true |\n| smoothingAmount | milliseconds – a higher number means more dampening | number | no | 100 |\n| hoverStart | hover to move the controller on start | bool | no | false |\n| verticalMode | enable vertical mode | bool | no | false |\n| startingPoint | the percentage to show of the before image | number | no | 50 |\n| fluidMode | enables the container to have fluid height and width | bool | no | false |\n\n## License\n\n[MIT](https://github.com/Mitscherlich/vue-image-compare-viewer/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitscherlich%2Fvue-image-compare-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitscherlich%2Fvue-image-compare-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitscherlich%2Fvue-image-compare-viewer/lists"}