vue-compare-two-images-component v1.0.5

Vue two images compare component

Hello. This is simple component for VueJS can help you check diffrence between two images using slider. On this page you will get to know how install and use features this component.

DEMO & EXAMPLES

Repository on Github

License: MIT

Changelog

1.0.5 - Fixed animate arrows

Features

• Simple for using
• Responsive (expandes from the container width, set container's height using image properly aspect ratio)
• Flexible tuning
• Mobile frendly

Install

Install npm package

$ npm install --save vue-compare-two-images-component

Register component globally

import CompareTwoImages from 'vue-compare-two-images-component';

// Register component as CompareTwoImages after

Vue.use(CompareTwoImages);

or import into your component directly.

import CompareTwoImages from 'vue-compare-two-images-component';

// Import CompareTwoImages component

export default {
	name: "YourComponentName",
	components: {
		CompareTwoImages: CompareTwoImages
		// Register imported component as CompareTwoImages
	}
}

After that use compare-two-images tag into template.

<template>
	<compare-two-images
		:leftImage="path/to/left.png"
		:rightImage="path/to/right.png">
	</compare-two-images>
</template>

Props

For additional information see documentation