Simple Image Comparing Slider

Usage example

Using the scripts form cdn

Include the following in your html file:

                    <!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://esm.sh/@armino-dev/comparing-slider/dist/comparing-slider.min.js"></script>
    <link rel="stylesheet" href="https://esm.sh/@armino-dev/comparing-slider/dist/comparing-slider.min.css" />
</head>
<body>
    <div id="hero-container"></div>

    ...the rest of your HTML...
    
    <script type="text/javascript">
        const options = {
            containerId: 'hero-container',
            left: {
                // replace this with your image
                image: 'images/gratisography-reindeer-dog-bw.jpg',
                alt: 'Reindeer Dog in black and white'
            },
            right: {
                // replace this with your image
                image: 'images/gratisography-reindeer-dog.jpg',
                alt: 'Reindeer Dog in color'
            }
        };

         window.addEventListener("load", function () {
            createComparingSlider(options);
         });
    </script>
</body>
</html>

Using the component ES6 style

First install the component from npm

                    npm install @armino-dev/comparing-slider

Import comparing slider styles in your css file

                    @import '@armino-dev/comparing-slider/dist/comparing-slider.min.css';

Import the component in your javascript file

                    import ComparingSlider from '@armino-dev/comparing-slider';

const options = {
    containerId: 'hero-container',
    left: {
        // replace this with your image
        image: 'images/gratisography-reindeer-dog-bw.jpg',
        alt: 'Reindeer Dog in black and white'
    },
    right: {
        // replace this with your image
        image: 'images/gratisography-reindeer-dog.jpg',
        alt: 'Reindeer Dog in color'
    }
};

window.addEventListener("load", function () {
    ComparingSlider.create(options);
});