Miss any of our Open RFC calls?Watch the recordings here! »

svelte-image-compare

1.1.1 • Public • Published

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

Keywords

Install

npm i svelte-image-compare

DownloadsWeekly Downloads

56

Version

1.1.1

License

MIT

Unpacked Size

46.2 kB

Total Files

7

Last publish

Collaborators

  • avatar