Not working for me...

[rchrdnsh]

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.

[rchrdnsh]

UPDATE:

I am using it within sapper, and when i refresh the page it does not work as described. But when I navigate away from the page it's on and come back via the sapper router, then the component works as expected...

[PaulMaly]

@rchrdnsh Hi, actually, I'm not really sure this component works with SSR stuff. I never used it with Sapper, so it seems we need some adaptation to the server-side. At first sight, the reason is that browser onload event is used. I'll think about what we can deal with that.

[rchrdnsh]

Hi Paul,

Thank you for taking a look. Got it working really nicely except for when the page initially loads. Once I navigate to the page, or navigate away and then back again, it works great :-)

[Amerlander]

I made it in sapper like this:

<script>
        import { onMount } from 'svelte';
        import ImageCompare from 'svelte-image-compare';
    
        export let data;
        $: items = [];
    
        onMount(async () => {
            items = data;
        });
</script>

{#if (items.length > 2) }
                <ImageCompare 
                    before="{items[0].url}"
                    after="{items[1].url}"
                >
                </ImageCompare>
 {/if}

I juse it as a component in that way. The onMount loads the data only on client side. The if clouse makes sure it doesnt load the ImageCompare component on SSR and also that data/items contains two images.

In theory doing this with {#if (process.browser) } might work also, but it didn't for me:

<script>
        import ImageCompare from 'svelte-image-compare';
        export let data;
</script>

{#if (process.browser) }
                <ImageCompare 
                    before="{data[0].url}"
                    after="{data[1].url}"
                >
                </ImageCompare>
{/if}