contraster

New JS library for create a before-after effect

Usage no npm install needed!

<script type="module">
  import contraster from 'https://cdn.skypack.dev/contraster';
</script>

README

Contraster

Vanilla JS library for create before-after effect.

preview

Demo

Installation

Install from NPM

npm i contraster
import Contraster from "contraster";
import "contraster/contraster.css";
const slider = new Contraster({
  container: "#horizontal"
});

Download assets

If you want to use library assets locally, you can directly download CSS and JS files from unpkg.com

Also support versions:

Contraster ES5

Contraster IE11

Add styles

<head>
...
<link rel="stylesheet" href="path/to/contraster.css">
...
</head>

Add scripts

<footer> ... </footer>
<script src="path/to/contraster.js"></script>

HTML Layout

<div id="mySlider"
     data-before="./img/ba-2-1.jpg"
     data-after="./img/ba-2-2.jpg">
</div>

Initialize

// index.js
const mySlider = new Contraster({
    container: '#mySlider',
    direction: 'diagonal',
    freePosition: true,
    'separator': {
        'class': 'custom-separator',
    },
});

Separator CSS styles

:before and :after

You can add before/after pseudo-elements:

// index.css
.custom-separator {
    position: relative;
    width: 10px;
}

.custom-separator:before {
    content: '::';
    width: 20px;
    height: 40px;
    position: absolute;
    background-color: #fff;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 100%;
}

Custom inner HTML-layout

Or you can append yout HTML-layout in separator:

// index.js
const separatorInnerHTML = `
    <span class="span1"></span>
    <span class="span2"></span>
    <span class="span3"></span>
`;

const mySlider = new Contraster({
    'separator': {
        'class': 'custom-separator',
        'innerHTML': separatorInnerHTML,
    },
});
// index.css
.separator-custom-inner .span1,
.separator-custom-inner .span2,
.separator-custom-inner .span3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    display: block;
}
.separator-custom-inner .span1 {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #333;
    transform: translate(-200%,-50%);
}
.separator-custom-inner .span2 {
    width: 20px;
    height: 10px;
    background-color: #333;
    transform: translate(-50%,-50%);
}
.separator-custom-inner .span3 {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #333;
    transform: translate(100%,-50%);
}

Parameters

Name Type Default Description
container CSSSelector | HTMLElement null String with CSS selector or HTML element
className string null Class for slider container
direction "vertical" | "horizontal" | "diagonal" "vertical" "Slider direction. Can be "vertical" or "horizontal" or "diagonal"
init boolean true Automatically initialize
freePosition boolean false Handle interaction (LMB click or touch) not only with the separator
progressPosition number 50 percent
separator object null separator options
separator.class string null Custom class for separator
separator.innerHTML string null Custom HTML in separator
separator.activeClass string "before-after-active-separator" This class set when user interactive with slider

Methods

Name Arguments Description
init - Initialize slider after destroy or with parameter init: false
destroy - Destroy slider
setProgress percent percent - number (example)
on "event, handler" Add event handler
off "event, handler" Remove event handler
emit "event, args" Fire event on instance

Examples

Initialize on demand

Create slider with disable automatically initialize:

const slider = new Contraster({
    container: '#slider',
    init: false
});

Initialize slider when it took:

slider.init();

Initialize after destroy

Destroy slider:

slider.destroy();

Initialize slider when it took:

slider.init();

Setting progress

slider.setProgress(30); // will set progress = 30%

Fire event

You can look all default events on the Events paragraph.

slider.emit('your-event');

Event listener

function myEventCallback(event) {
    console.log('my event fire! ', event)
}
slider.emit('your-event', myEventCallback);

Remove event listener

slider.off('your-event', myEventCallback);

Events

Name Description
init Event will fired after initialize
destroy Event will fired after destroy
setProgress Event will fired after progress setting
setSizes Event will fired after sizes setting

Examples

Create slider:

const slider = new Contraster({
    container: '#slider',
});

Add event listeners with "on" method:

slider.on('init', function() {
    alert('Slider was initialize!');
})
slider.on('destroy', function() {
    alert('Slider was destroy!');
})
slider.on('setProgress', function() {
    alert('Slider was change!');
})
slider.on('setSizes', function() {
    alert('Slider was set sizes!');
})

Remove event listeners with "off" method:

Create callback:

function callback(event) {
    console.log('Slider was initialize ', event);
}

Add listener:

slider.on('init', callback);

Remove listener:

slider.off('init', callback);

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

History

12.12.21

Publish v0.1

License

MIT License

Copyright (c) 2021 timshaq