Skip to content

Simple Svelte component to compare two images using slider.

Notifications You must be signed in to change notification settings

PaulMaly/svelte-image-compare

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Image comparison slider for Svelte 3

NPM version NPM downloads

Simple Svelte component to compare two images using slider.

preview

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

About

Simple Svelte component to compare two images using slider.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published