Specro / remusjs

Remus is a responsive multi-view before/after slider

RemusJS v0.1

✔️ 5kb minified!
✔️ Responsive!
✔️ Custom content!
✔️ Multiple views!
✔️ Vanilla JS!

About

Remus works by manipulating element container's width to show or hide a part of the content. It takes up 100% of its container's width and assumes that your content has enough width to fill. It resizes content dynamically by applying main container's width to content.

Installation

Webpack

Install with NPM:

npm install remusjs --save

And import in your project:

import Remus from 'remusjs';

Don't forget the CSS:

import from 'remus/src/remus.css';

SCSS:

@import '~remusjs/src/remus';

Browser

Just download minified sources and add them to your HTML:

<link rel="stylesheet" href="remus.min.css">
<script src="remus.min.js"></script>

Usage

Wrap the images or other content you want to compare in a remus-element class:

<div class="remus">
	<div class="remus-element">
		<img src="" alt="">
	</div>
	<div class="remus-element">
		<img src="" alt="">
	</div>
</div>

...and initialize Remus:

var remus = new Remus({
	element: '.remus', // selector for main Remus container
	height: null // height value in pixels if you want it to be fixed - optional
});

License

Remus is licensed under MIT license.