A vanilla JS keyboard accessible plugin for any before-after comparison
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo-assets
demo
dist
src
tests
.editorconfig
.eslintrc.js
.gitignore
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
README.md
karma.conf.js
package-lock.json
package.json
webpack.common.js
webpack.config.js
webpack.demo.js
webpack.development.js
webpack.production.js
webpack.test.js

README.md

Travis (.org) Codecov Github file size

BeerSlider

A vanilla JavaScript accessible before-after slider

Demo

You can find the demo here.

How?

Installation

The dist folder contains the ready for production minified files: BeerSlider.js and BeerSlider.css

<head>
  ...
  <link rel="stylesheet" href="dist/BeerSlider.css">
</head>
<body>
  
  <!-- Bottom of body -->
  <script src="dist/BeerSlider.js"></script>
  <script>
    new BeerSlider(document.getElementById('slider'));
  </script>
</body>

You can also use the cdn solution

<head>
  ...
  <link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css">
</head>
<body>
  
  <!-- Bottom of body -->
  <script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>
  <script>
    new BeerSlider(document.getElementById('slider'));
  </script>
</body>

npm:

npm install beerslider

Usage:

The basic markup is:

<div id="slider" class="beer-slider" data-beer-label="before">
  <img src="../demo-assets/images/dogs-before.jpg" alt="">
  <div class="beer-reveal" data-beer-label="after">
    <img src="../demo-assets/images/dogs-after.jpg" alt="">
  </div>
</div>

The data-beer-labels are optional, you can leave them empty or do not add them at all.

To activate the slider add the following:

new BeerSlider(document.getElementById('slider'));

Customization

You can initiate BeerSlider with some options, the available options are:

{
  // start value
  start: '50',
  // prefix 
  prefix: 'beer'
}

Use with jQuery or Zepto

If you use jQuery or Zepto in your project and have a few before-after sliders on your page, you can do something like that:

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').BeerSlider({start: 25});
</script>

or:

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').each( (function( index, el ) {
    $(el).BeerSlider({start: $(el).data('beer-start')})
  });
</script>

with:

<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="25">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>
<div id="beer-slider2" class="beer-slider" data-beer-label="before" data-beer-start="75">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>

A Codepen demo using jQuery is available here, and Zepto here.