Author: | VincentTV |
---|---|
Views Total: | 1,329 views |
Official Page: | Go to website |
Last Update: | September 18, 2019 |
License: | MIT |
Preview:

Description:
before-after-slider is a vanilla JavaScript library that generates a responsive, touch-enabled before/after slider to help your user compare 2 images for differences.
How to use it:
Install the package and import the before-after-slider module.
# NPM $ npm install before-after-slider --save
import SliderBar from 'before-after-slider';
Or load the slider.bundle.js from a CDN.
<script src="https://cdn.jsdelivr.net/npm/before-after-slider@latest/dist/slider.bundle.js"></script>
The required HTML structure for the before/after slider.
<div id="slider-example"></div>
Initialize the before/after slider and define the before/after images to compare. Note that these two images must have the same size.
new SliderBar({ el: "#slider-example", beforeImg: 'before.jpg', afterImg: 'after.jpg', width: "90%", height: "400px" });
Determine whether to show the divider line. Default: true.
new SliderBar({ el: "#slider-example", beforeImg: 'before.jpg', afterImg: 'after.jpg', width: "90%", height: "400px", line: true, lineColor: 'rgba(0, 0, 0, .5)' });