Fork Me On GitHub

Beer Slider

Responsive & Accessible Before-After Slider

Original man holding beer
Processed with logo and Lightroom presets

What's Beer Plugin?

Beer Slider is a lightweight vanilla JavaScript plugin.

It's basic purpose is to compare two versions of an image, for example the same object shot in two different moments, a pre-edited photo and its processed version, a sketch and the finished illustration, etc.

It can be particularly useful with photo presets (Lightroom presets, Photoshop actions, etc.).

Beer Slider is keyboard accessible - you can access it and reveal/hide the "after" state image with the keyboard.

Examples:

Baltic seashore - unprocessed original photo
Baltic seashore - sepicol Lightroom preset by Altphotos.com
Dogs playing in the sea - unprocessed original photo
Dogs playing in the sea using Altphotos.com Lightroom presets
Original unprocessed panoramic photo with mountainous landscape
Panoramic photo with mountainous landscape and some Lightroom presets applier

How To Use?

Include the stylesheet in your head:


<link rel="stylesheet" href="BeerSlider.css">
      

Structure your markup as in the example below. Make sure to keep the class names as in the example. The data-beer-label attributes define the text of the labels displayed in the upper corners of the slider. Remove them or leave empty if you do not need the label(s).


<div id="beer-slider" class="beer-slider" data-beer-label="before">
  <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>
      

Include the script before the closing body tag:


<script src="BeerSlider.js"></script>
<script>
  var slider = new BeerSlider( document.getElementById( "beer-slider" ) );
</script>
      

You can also set the starting position somewhere else than in the middle using the parameter start taking values from 0 to 100.


<script>
  new BeerSlider( document.getElementById( "beer-slider" ), { start: 25 } );
</script>
      

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>
      

Credits:

In this demo we use the beautiful presets from the free pack of Lightroom presets available on Altphotos as well as the CC0 images found on Altphotos.

The original beer photo by PaweĊ‚ Kadysz can be found on Altphotos.

Beer Slider logo was created by Joe Vains.