Author: | Recidvst |
---|---|
Views Total: | 2,939 views |
Official Page: | Go to website |
Last Update: | June 25, 2018 |
License: | MIT |
Preview:

Description:
Scrub Slider is a pure JavaScript library that creates an interactive, configurable, responsive, vertical slider to compare two images (after/before) layered on top of each other.
How to use it:
Include the minified version of the Scrub Slider on the webpage.
<link href="dist/Scrub.min.css" rel="stylesheet"> <script src="dist/Scrub.min.js"></script>
Create two DIV element to hold the before/after images and then insert them to the Scrub Slider container as these:
<div class="example" id="demo"> <div style="before-class"></div> <div style="after-class"></div> </div>
Create a new Scrub object and specify the path to the before/after images.
Scrub({ target: '#element', src: ['before.jpg','after.jpg'] });
Add custom alternative text to the before/after images.
Scrub({ target: '#element', src: ['before.jpg','after.jpg'], alt: ['Image 1','Image 2'] });
Decide whether to show/hide the circular handle.
Scrub({ target: '#element', handle: false, // default true src: ['before.jpg','after.jpg'] });
Set the height of the image comparison slider.
Scrub({ target: '#element', height: 300, src: ['before.jpg','after.jpg'] });