Made by Abel Cabeza Román, a Codictados developer.

See examples

Light Vanilla Javascript library to compare multiples images with sliders. Also, you can add text and filters to your images.

Download the library.

npm i dics

And import it to your project.

<link rel="stylesheet" href="dics.css">
<script src="dics.js"></script>

You only have to create a container and add your images. You can add all images you want!! If you add the alt attribute, you will view the text in the image comparison.

<div class="b-dics">
    <img src="01.jpg">
    <img src="02.jpg" alt="Japan Yellow">
    <img src="03.jpg" alt="Japan Orange">
    <img src="04.jpg" alt="Japan Black & White">
</div>

Finally, you need to initialize the component like this.

new Dics({
    container: document.querySelector('.b-dics')
});

Or this.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    linesOrientation: 'vertical',
    textPosition: 'left',
    arrayBackgroundColorText: ['#000000', '#FFFFFF'],
    arrayColorText: ['#FFFFFF', '#000000'],
    linesColor: 'rgb(0,0,0)'
});

If you want you can include different options.

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.