Dics: Definitive Image Comparison Slider

Dics: Definitive Image Comparison Slider


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


See examples


Light Vanilla Javascript library (8kb minified) 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">

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.

containerREQUIRED: HTML containerdocument.querySelector('.b-dics')
filtersArray of CSS string filters['blur(3px)', 'grayscale(1)', 'sepia(1)', 'saturate(3)']
hideTextsShow text only when you hover the image containertrue,false
textPositionSet the prefer text position'center','top', 'right', 'bottom', 'left'
linesOrientationChange the orientation of lines'horizontal','vertical'
rotateRotate the image container (not too useful but it’s a beatiful effect. String of rotate CSS rule)'45deg'
arrayBackgroundColorTextChange the bacground-color of sections texts with an array['#000000', '#FFFFFF']
arrayColorTextChange the color of texts with an array['#FFFFFF', '#000000']
linesColorChange the lines and arrows color'rgb(0,0,0)'


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