Dics: Definitive Image Comparison Slider

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

DEMO

See examples

Description

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

Installation

Download the library.

npm i dics

And import it to your project.

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

Usage

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)'
});

Options

If you want you can include different options.

| Option | Description | Example | | --- | --- | --- | | container | REQUIRED: HTML container | document.querySelector('.b-dics') | | filters | Array of CSS string filters |['blur(3px)', 'grayscale(1)', 'sepia(1)', 'saturate(3)'] | | hideTexts | Show text only when you hover the image container |true,false| | textPosition | Set the prefer text position |'center','top', 'right', 'bottom', 'left' | | linesOrientation | Change the orientation of lines |'horizontal','vertical' | | rotate | Rotate the image container (not too useful but it's a beatiful effect. String of rotate CSS rule) |'45deg'| | arrayBackgroundColorText | Change the bacground-color of sections texts with an array |['#000000', '#FFFFFF']| | arrayColorText | Change the color of texts with an array |['#FFFFFF', '#000000']| | linesColor | Change the lines and arrows color |'rgb(0,0,0)'|

Contributing

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