Simple Responsive Image Comparison Component – vue-compare-image

Description:

compare-image is a simple, responsive, mobile-friendly image comparison component to compare two images for differences.

How to use it:

1. Install and import the component.

import VueCompareImage from 'vue-compare-image';

2. Add before/after images to the component.

<template>
  <VueCompareImage leftImage="before.jpg" rightImage="after.jpg" />;
</template>

3. Initialize the component.

export default {
  name: 'app',
  components: { VueCompareImage }
};

4. Config the component with the following props.

leftImage: {
  type: String,
  default: '',
},
leftImageAlt: {
  type: String,
  default: null,
},
leftLabel: {
  type: String,
  default: '',
},
rightImage: {
  type: String,
  default: '',
},
rightImageAlt: {
  type: String,
  default: null,
},
rightLabel: {
  type: String,
  default: '',
},
hover: {
  type: Boolean,
  default: false,
},
handleSize: {
  type: Number,
  default: 40,
},
sliderLineWidth: {
  type: Number,
  default: 2,
},
sliderPositionPercentage: {
  type: Number,
  default: 0.5,
}

Download Details:

Author: junkboy0315

Live Demo: https://vue-compare-image.yuuniworks.com/

Download Link: https://github.com/junkboy0315/vue-compare-image/archive/master.zip

Official Website: https://github.com/junkboy0315/vue-compare-image

Last Update: October 24, 2019

Install:

# Yarn
$ yarn add vue-compare-image

# NPM
$ npm install vue-compare-image --save

You Might Be Interested In:

Add Comment