Responsive Accessible Image Comparison Slider In Pure JS – BeerSlider

Category: Image , Javascript , Recommended | September 15, 2018
Views Total:1,037 views
Official Page:Go to website
Last Update:September 15, 2018


Responsive Accessible Image Comparison Slider In Pure JS – BeerSlider


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 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="">

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

You Might Be Interested In:

Leave a Reply