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>
