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

| props | description | type | required | default | |:----- |:----------- |:---- |:--------:|:------- | | container | the container viewer element | string | HTMLElement | no | -- | | before | the before image | string | slot | yes | -- | | after | the after image | string | slot | yes | -- | | controlColor | the controller color | string | no | #fff | | controlShadow | add shadow to controller | bool | no | true | | addCircle | add circle to controller | bool | no | false | | addCircleBlur | add blur to controller circle | bool | no | true | | showLabels | show labels | bool | no | false | | labelOptions | the label options | object | no | { before: 'Before', after: 'After', onHover: false } | | smoothing | if controller move smoothly, automatically disabled on touch enabled screens | bool | no | true | | smoothingAmount | milliseconds – a higher number means more dampening | number | no | 100 | | hoverStart | hover to move the controller on start | bool | no | false | | verticalMode | enable vertical mode | bool | no | false | | startingPoint | the percentage to show of the before image | number | no | 50 | | fluidMode | enables the container to have fluid height and width | bool | no | false |

License

MIT