Author: | abelcabezaroman |
---|---|
Views Total: | 1,416 views |
Official Page: | Go to website |
Last Update: | February 12, 2022 |
License: | MIT |
Preview:

Description:
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