Author: | pehaa |
---|---|
Views Total: | 994 views |
Official Page: | Go to website |
Last Update: | September 15, 2018 |
License: | MIT |
Preview:

Description:
BeerSlider is a vanilla JavaScript image comparison plugin used to compare before/after images with an accessible slider.
The users are allowed to show the before and after differences between images with arrow keys and drag/swipe events.
Fully responsive and works perfectly on mobile, tablet and desktop devices.
How to use it:
Install & download.
# NPM $ npm install beerslider --save
Include the BeerSlider’s JavaScript and CSS on the page.
<link rel="stylesheet" href="dist/BeerSlider.css"> <script src="dist/BeerSlider.js"></script>
Add before/after images to the webpage.
<div id="slider" class="beer-slider" data-beer-label="before"> <img src="before.jpg" alt=""> <div class="beer-reveal" data-beer-label="after"> <img src="after.jpg" alt=""> </div> </div>
Initialize the beer slider.
new BeerSlider(document.getElementById('slider'));
Possible options to customize the beer slider.
- target – name of the target object
- global – target is the global object
- stat – export as static methods of target
- proto – export as prototype methods of target
- real – real prototype method for the `pure` version
- forced – export even if the native feature is available
- bind – bind methods to the target, required for the `pure` version
- wrap – wrap constructors to preventing global pollution, required for the `pure` version
- unsafe – use the simple assignment of property instead of delete + defineProperty
- sham – add a flag to not completely full polyfills