vue-image-compare-viewer v0.1.0

vue-image-compare-viewer

Aka vue version of image-compare-viewer

A MODERN, LIGHTWEIGHT COMPARISON SLIDER

Compare before and after images, for grading, CGI and other retouching comparisons.

$ npm install vue-image-compare-viewer --save

HOW TO USE

Basic example

<ImageCompareViewer before="..." after="..." />

UI THEME OPTIONS

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'.

<ImageCompareViewer
  before="..."
  after="..."
  control-color="#73c781"
  :control-shadow="false"
  add-circle
  add-circle-blur
/>

LABELS

You can style these labels using .icv__label for both, and .icv__label-before, .icv__label-after for the individual labels.

<ImageCompareViewer
  before="..."
  after="..."
  show-labels
  :label-options="{
    before: 'Clay',
    after: 'Final render',
    onHover: false // default
  }"
/>

DISABLE SMOOTHING

Smoothing is automatically disabled on touch enabled screens.

<ImageCompareViewer before="..." after="..." :smoothing="false" />

INCREASE SMOOTHING

Milliseconds – a higher number means more dampening

<ImageCompareViewer before="..." after="..." :smoothing-amount="300" />

START ON HOVER

Clicking will activate manual control.

<ImageCompareViewer before="..." after="..." hover-start />

VERTICAL MODE

Vertical mode is mobile friendly!

<ImageCompareViewer before="..." after="..." vertical-mode />

STARTING POINT

The percentage to show of the before image.

<ImageCompareViewer before="..." after="..." :starting-point="75" />

FLUID MODE

Fluid 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.

<ImageCompareViewer
  before="..."
  after="..."
  fluid-mode
  style="width: 100%; height: 66vh;"
/>

Options

License

MIT