Responsive Accessible Image Comparison Slider In Pure JS – BeerSlider

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