Compare Multiple Images With Sliders – Dics

Dics (Definitive Image Comparison Slider) is a JavaScript image comparison library which allows you to compare multiple images with vertical or horizontal sliders.

Fully responsive and touch-friendly. Drag & hold the sliders to view the differences between images. Also supports image filters and text captions.

How to use it:

Import the Dics library’s JavaScript and CSS files into the html document.

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

Insert multiple images into a container.

<div class="b-dics">
  <img src="1.jpg" alt="Image 1">
  <img src="2.jpg" alt="Image 2">
  <img src="3.jpg" alt="Image 3">
  <img src="4.png" alt="Image 4">
    ...
</div>

Apply image comparison sliders to the images.

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

Show the caption text on hover instead.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    hideTexts: true
});

Customize the position of the image caption. Possible values: 'center','top', 'right', 'bottom', 'left'.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    textPosition: 'center'
});

Set the orientation of the slider to Horizontal.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    linesOrientation: 'horizontal'
});

Rotate the image container.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    rotate: '45deg'
});

Customize the text & background colors:

new Dics({
    container: document.querySelectorAll('.b-dics'),
    // ['#000000', '#FFFFFF']
    arrayBackgroundColorText: null,
    arrayColorText: null
});

Apply CSS filters to the images.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    filters: null
});

Customize the color of the slider.

new Dics({
    container: document.querySelectorAll('.b-dics'),
    linesColor: null
});

Changelog:

v2.6.0 (02/12/2022)

• Update resize