|Views Total:||994 views|
|Official Page:||Go to website|
|Last Update:||September 15, 2018|
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
<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.
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