svelte-image-compare

Image comparison slider for Svelte 3

Simple Svelte component to compare two images using slider.

Features

• Simple
• Responsive (fit to the parent width)
• Size difference between two images handled correctly. Element size determined by following two factors:
  • width of the parent
  • right image's aspect ratio

Install

npm i svelte-image-compare --save

yarn add svelte-image-compare

CDN: UNPKG | jsDelivr (available as window.ImageCompare)

Usage

<ImageCompare 
    before="//placehold.it/600x200/E8117F/FFFFFF"
    after="//placehold.it/600x200/CCCCCC/FFFFFF"
    contain={true}
>
    <span slot="before">BEFORE</span>
    <span slot="after">AFTER</span>
</ImageCompare>
 
<script>
    import ImageCompare from './ImageCompare.svelte';
</script> 

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

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

just before closing body tag.

API

Props

Name	Type	Description	Required	Default
before	String	Path to the image image before change	Yes	empty string
after	String	Path to the image image after change	Yes	empty string
offset	Number	How far from the left the slider should be on load (between 0 and 1)	No	0.5
contain	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
overlay	Boolean	Show overlay upon images	No	true
hideOnSlide	Boolean	Hide overlay & labels on sliding	No	true

Slots

• before - element to be placed on top of before image (basically a label)
• after - element to be placed on top of after image (basically a label)

License

MIT © PaulMaly