Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be easily implemented by those of you who are more comfortable with jQuery or Zepto.

It’s keyboard accessible, responsive and open-source.

First of all, check the demo page for a few examples and the usage instructions.

PS. You will find some great (and free) Lightroom presets on altphotos.com – some of them were used in our examples.

Further Examples on Codepen:

Basic + source code: SCSS and JS (Babel):

See the Pen BeerSlider – before-after reveal slider – code source, basic demo by Paulina Hetman (@pehaa) on CodePen.

Usage with jQuery or Zepto:

See the Pen BeerSlider – use with jQuery and various start parameters by Paulina Hetman (@pehaa) on CodePen.

Usage with background images

The Beer Slider is not only for comparing images, try it for backgrounds.

See the Pen Background Comparison by Paulina Hetman (@pehaa) on CodePen.

Fitting images into container with svg

Sometimes you may need that your images cover the slider’s area. For example – you want to have a slider that fills the whole screen, or you want it to be a square. With Beer Slider you can use the svg approach proposed by Sara Soueidan.

See the Pen Full width full height before-after slider by Paulina Hetman (@pehaa) on CodePen.

See the Pen Circle before-after slider by Paulina Hetman (@pehaa) on CodePen.

Thank you! We hope that some of you will find it useful. See you soon!

Fork it on Github

I'm a front-end developer, WordPress developer and trainer. Otherwise coding, cooking and doing yoga.
Polish, married to a french guy Joe Vains with whom we live in the very center of Paris.
Follow @PeHaa on twitter and on dribbble.

Discussion

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.