vue-image-compare-plus

Compare two images via slider using vue.js - Now with ability to choose slider start position
662 1
vue component slider image compare comparison
Install
npm install vue-image-compare-plus
Latest Version:0.1.2
Vue:2
License:MIT
Last Updated:Jul 26, 2017
Links: GitHub  ·  npm
Maintainer: bertie.blackman

Vue Image Compare

This plugin was forked from https://www.npmjs.com/package/vue-image-compare

Requirements

Installation

npm i vue-image-compare-plus --save

Usage

import Vue from 'vue';
import VueImageCompare from 'vue-image-compare-plus';

Vue.use(VueImageCompare);

new Vue({
  data() {
    return {
      before: '/img/before.jpg',
      after: '/img/after.jpg'
    }
  }
}).$mount('#app');

<div id="app">
  <image-compare :before="before" :after="after"/>
</div>

If you are not using using es6, instead of importing add

<script src="/path/to/vue-image-compare.js"></script>

just before closing body tag.

Props

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
handleStartPosition String Determine handle start position No center

Slots

  • icon-left - element to be placed on the left side of the handle
  • icon-right - element to be placed on the right side of the handle

Example:

<image-compare before="/img/before.jpg" after="/img/after.jpg" :padding="{ left: 50, right: 50 }">
  <i class="fa fa-angle-left" aria-hidden="true" slot="icon-left"></i>
  <i class="fa fa-angle-right" aria-hidden="true" slot="icon-right"></i>
</image-compare>

License

MIT

Related Packages

img-comparison-slider

Slider component to compare images before and after

1,711,519 873
compare comparison image slider img web-component
vue-image-compare2

Compare two images with a fancy slider

6,326 27
compare comparison component image slider vue
vue-image-compare

Compare two images via slider using vue.js

4,873 31
compare comparison component image slider vue
vue-maplibre-compare

A Vue 3 component for comparing MapLibre maps side-by-side with a slider

5,520
compare comparison slider vue map maplibre vue3
vue-flux

Vue image and other resources slider

25,152 551
image slider vue carousel parallax

Version History

Version Released Vue License
0.1.2 ^2.0.0 MIT
0.1.1 ^2.0.0 MIT
0.1.0 ^2.0.0 MIT
0.0.9 ^2.0.0 MIT
0.0.8 ^2.0.0 MIT