dics

2.6.1 • Public • Published

Dics: Definitive Image Comparison Slider

Codictados

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.

Readme

Keywords

none

Package Sidebar

Install

npm i dics

Weekly Downloads

3

Version

2.6.1

License

ISC

Unpacked Size

3.7 MB

Total Files

26

Last publish

Collaborators

  • abelcabezaroman