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.
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.
Thank you! We hope that some of you will find it useful. See you soon!