svelte-image-compare's Introduction

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

svelte-image-compare's People

Stargazers

Watchers

svelte-image-compare's Issues

Not working for me...

using it like this:

<div class='compare'>
  <ImageCompare
    before="art-blur.jpg"
    after="art-focus.jpg"
    contain={true}
  />
</div>

...but i'm getting the same image for both sides (both are blurry, when only the before should be blurry) and the slider in the middle does not move:

...should i be doing something differently?

It works fine with your example code with placehold.it images, but when I try to use other images it doesn't seem to work right.

Not working with SvelteKit

Hi All,
I tried this package with SvelteKit latest version and it's not working. I'm getting below error:-

<ImageCompare> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Recommend Projects