Compare two images via slider using vue.js
npm install vue-image-compare``bash`
npm i vue-image-compare --save
`javascript
import Vue from 'vue';
import VueImageCompare from 'vue-image-compare';
Vue.use(VueImageCompare);
new Vue({
data() {
return {
before: '/img/before.jpg',
after: '/img/after.jpg'
}
}
}).$mount('#app');
`
`html`
If you are not using using es6, instead of importing add
`html`
just before closing body tag.
| Name | Type | Description | Required | Default |
| --- | --- | --- | --- | --- |
| before | String | Path to the image image before change | Yes | undefined |after
| | String | Path to the image image after change | Yes | undefined |full
| | 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 |padding
| | Object | Set left and right "padding" in pixels, so handle can not reach edge of an image | No | { left: 0, right: 0 } |hideAfter
| | Boolean | Hide image after and handle | No | false |
- icon-left - element to be placed on the left side of the handleicon-right
- - element to be placed on the right side of the handle
Example:
`html``