Minor issue which causes the page to 'jump' to the hiding and showing of scrollbar.

Edit: Looking at your src, it seems like this is deliberate. Is there a specific reason to why the scrollbar is disabled?

Hi, if i add
JavaScript https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js
CSS https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css

then nothing happening, but if i add
https://image-compare-viewer.netlify.app/js/1.0c7d4dc2.chunk.js
from the website then everything image compare is working..

how can i make this work?

I have followed the documentation exactly to set up the viewer.

I am loading CSS and JS from the CDN:

<link type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">
<script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>

My HTML is structured:

<div id="image-compare">
    <img src="/uploads/car1.jpeg" alt="" />
    <img src="/static/uploads/car2.jpeg" alt="" />
</div>

My JS:

<script>
    const element = document.getElementById("image-compare");
    const viewer = new ImageCompare(element).mount();
</script>

However, the result looks like this:

It seems that the CSS is not being loaded from the CDN. Why would this be the case?

Hi @kylewetton!

First of all, great work! It looks nice and it's responsive, just what I was looking for.

One thing though: when I use the slider, the page vertical scroll disappears and the whole content jumps around. At first I thought I did something wrong, but now I see the same behaviour in the examples on https://image-compare-viewer.netlify.app/.

Is there any way to fix this?

EDIT:
After some digging I've found out the body tag is getting a "overflow: hidden" style, when the slider is in use. Does this serve any purpose? :) Without it everything seems to work as intended.

Hello, is it possible to move the compare bar only with controls buttons (and not with a click everywhere on the image) ?

I attempt to use css transform/rotate to achieve it but it doesn't work.

It would be nice to have a trigger that turns full screen with rotated view (portrait to landscape).

Hi, thank you for the great tool! It is really quick to plug-n-play and has lots of features already included. I love it! One question though, how do you think is it a good idea to try out an angled separator so that it's not strictly vertical or horizontal line, but has some tint?

First of all thanks for the awesome script. but i could not find any license for use it. So can you tell, am i use it freely to any project?

If you could marke touch and wheel event listeners as passive to improve page's scroll performance and user experience. Thanks

Hi @kylewetton

Is there a way to have a support of the picture tag ?

I've noticed a very strange behaviour only on Safari.

I'm using a 2 column layout with column-count: 2;.
As you can see here (on a staging site), the images with image-compare-viewer on the second col are completely bugged. But, when I restore to only one col or any other display: grid|flex; it works just fine.

You can compare the staging with the prod version, working with a grid layout here.

I did some test but I have not been able to determine if the problem comes from the JS or Safari 🤷‍♂️. Any idea ?

When I touch image to slide before/after, I was dropped to start of page

Using CDN and template init code:

const element = document.getElementById("image-compare");

    const options = 
    {
        // UI Theme Defaults      
        controlColor: "#FFFFFF",
        controlShadow: true,
        addCircle: false,
        addCircleBlur: true,
      
        // Label Defaults      
        showLabels: true,
        labelOptions: 
        {
          before: '1',
          after: '2',
          onHover: false
        },
      
        // Smoothing [looks laggy]      
        smoothing: false,
        smoothingAmount: 100,
      
        // Other options      
        hoverStart: false,
        verticalMode: false,
        startingPoint: 75,
        fluidMode: true
      };
        
      // Add your options object as the second argument
      const viewer = new ImageCompare(element, options).mount();

Chrome desktop, latest, Win10.

Should I serve locally? Any known issue of this? Why is there even a jQuery (3.6.0) clash, I wonder?

Is there a way to get this to work in IE11?

I'm getting this error while import ImageCompare.

"ImageCompare" is declared, but its value is never read.ts(6133)
No file declaration found for module 'node_modules/image-compare-viewer'. 'c:/frontend/node_modules/image-compare-viewer/src/scripts/index.js' implicitly has type "any".
Try "npm i --save-dev @types/image-compare-viewer" if it exists or add a new declaration file (.d.ts) that includes "declare module 'node_modules/image-compare-viewer';".

My typescript file are:

import { Component, OnInit } from '@angular/core';
import ImageCompare from "node_modules/image-compare-viewer";

@component({
selector: 'app-dzmt-carousel',
templateUrl: './dzmt-carousel.component.html',
styleUrls: ['./dzmt-carousel.component.css']
})
export class DzmtCarouselComponent implements OnInit {

constructor() { }

ngOnInit(): void {

const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();

}

}

I like to know if there is a way to add Labels on both of the images and highlight hover.

It would be nice if we could disable scrolling when we are sliding, especially on mobile.
Body Scroll Lock seems to be a nice solution.

But, to keep image-compare-viewer dependency free, we need to have access to events like onSlidingStart and onSlidingEnd that return the html element.

What do you think ?

Hi again Kyle

your implementation of preventing screen moving upside down when we are swiping the before/after images was a great addition.

But there is a new problem now. It is also blocking the upside/down swipe which is a natural behaviour for visitors to browse the page. To tackle the problem, user should tap on another location rather than image-compare div. Imagine a web designer would like to put several image-compare images, then it would be very annoying to find a space so that visitors can browse the page upside/down.

To tackle the problem, do you think you can freeze the screen movements when a user touches to ".icv__control" ?

Thank you for this great code!

I have do a question: Do we really need this dependencies to use the viewer on a website?

"dependencies": {
    "@babel/polyfill": "^7.6.0",
    "autoprefixer": "^10.4.7",
    "body-scroll-lock": "^4.0.0-beta.0",
    "core-js": "^3.3.2",
    "postcss-loader": "^7.0.0"
}

As I understand, all the code in dist/ will not use this. If we need this for some reason, could we please update them to fix the NPM audit errors for postcss?

I can provide a pull request if that helps.

More accessibility is always better. :)
Maybe some aria attributes would be relevant, but at first the component have to be used with keyboard (focus inside then arrow keys), not only mouse.

For example, this lib, which has waaay less options than yours (and not maintained), implement this behavior :
https://github.com/pehaa/beerslider

There is an input "range" with aria attributes, for accessibility and… that's all, I think there is 0 line of JS for keys because "range" HTML component is already focusable and usable by keyboard!
https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/range
So I suppose that they only synchronize the bar&after with the percent value of the input "range".

There is a bug on mobile devices as mentioned also in this issue

It seems the issue is present on the 1.6.2 version only, as the author stated the issue is not on the demo and that's because the demo uses the 1.5.0 version. Currently, I'm using the 1.5.0 version but I'm not sure what improvements or fixes I'm missing on the new version.

Thank you for your work, it's great. I have achieved image matching so far, can I achieve video matching? Some desktop apps need this very much.

On Win10 with Firefox, Edge and Chrome: Everything is broken.

1. Even the untouched GitHub demo doesn't work (after not being able to get it to work on my own project that was very vanilla).
2. After trying to implement on my own site with the vanilla basics using js/css CDN, I had the same result (just plain images stacking vertically).
3. I tried Incognito modes - it's not extensions.
4. Screenshot + GIF below.

Screenshot

GIF

https://giphy.com/gifs/nvvjtIGAav8GBf5Uvt

It's a long shot, but would there be any support for more than 2 images?

Hey @kylewetton, it's me again, 🤭

Do you think it is possible to apply an user-select: none; on the whole page (e.g. body) to prevent selection when the sliding is going beyond the limit of the container ?

Hi @kylewetton

Thanks for this package. It works super great ! 💯

Just a quick feedback :

1. As you can see here when you select the control and keep your mouse pressed while leaving the image container, and you come back to the container, you have always the control.
2. But with image-compare-viewer, when you leave the container with the mouse pressed and you come back, you loose the control. You have to click again.

I would be nice to have the same behaviour like described first especially when you reach the limits of the container.

A* during touch unwanted width is appeared

In version 1.6.2 there is a bug that can only be reproduced on the iPhone in the Safari browser. Its essence is that when we try to move the bar before/after, our page moves to the top. Everything is fine in version 1.5.0