Contraster NPM

Contraster

Vanilla JS library for create before-after effect.

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

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

History

12.12.21

Publish v0.1

License

MIT License

contraster slider before after before after image before after swipe touch ios mobile plugin

@everything-registry/sub-chunk-1377 @zalastax/nolb-contr

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago