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!
Hi, can i ask how you make the slider responsive?
I’d like to have some before/after in fullscreen modals, i’ve tried everything, a wrapper, setting max-width on the #slider, the two images end up being mismatched by some pixels.
If i open and close the inspector it runs fine
Very nice, but didn’t work with webp and the sadly :/
which we reveal in the doesn’t have anymore a dynamic width (calculated in js)
Hi, I’ve been using your code(thank you very much for sharing btw) for my site. but for some reason, it suddenly stop on mobile devices.. not sure what happened.. didn’t do an update or changes in the codes..
So the slider goes to the very left side of the images being compared.. and i can’t seem to pull it back..
please see video http://somup.com/c3l0l5wJr9
used to view it:
Iphone 13 pro max
Chrome / Safari
i used this site as sample..
hope you can help me..