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.