<% if(htmlWebpackPlugin.files.css) { %> <% } %>
Fork Me On GitHub

## 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:

## 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.