BeerSlider.js is a simple JavaScript library that allows you to compare two images using a slider.
In this article, we will walk through step-by-step how to overlay before-and-after images using BeerSlider.js.
Why Use BeerSlider.js?
There are many ways to display before-and-after images, but BeerSlider.js offers the following advantages:
- Lightweight and fast
- Easy to customize
- Responsive support
- Cross-browser compatibility
Required CSS Settings
First, load the BeerSlider.css file to apply the basic styles for the slider. Copy the code below and paste it into the head section of your HTML file. You can also customize the style to match your design.
<link rel="stylesheet" href="BeerSlider.css">
<style>
* {
padding: 0;
margin: 0;
}
body {
font-size: 14px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0 40px 0;
line-height: 1.8em;
}
</style>
Set Up the HTML Structure
Set up the HTML structure to display before-and-after images. Place the before and after images inside a container with specific IDs or class names. Prepare two overlapping images within the area (id="slider"): the before image (yakei.jpg) and the after image (yakei-after.jpg).
<h1>Easily visualize the difference between two images by overlapping before-and-after images using BeerSlider.js.<br>Click and drag left or right on the image below.</h1>
<div id="slider" class="beer-slider" data-beer-label="Before Image">
<img src="yakei.jpg" alt="">
<div class="beer-reveal" data-beer-label="After Image"><img src="yakei-after.jpg" alt=""></div>
</div>
Activate the Slider Using BeerSlider.js with JavaScript
Finally, load BeerSlider.js and add the script to activate the slider. This enables users to interact with the slider using a mouse or touch input.
<script src="BeerSlider.js"></script>
<script>
new BeerSlider( document.getElementById( "slider" ) );
</script>
Demo Page: Visualize the Difference Between Two Images Using BeerSlider.js
You can check the completed demo page from the link below.
Demo page for visualizing the difference between two images using BeerSlider.js
Summary
Using BeerSlider.js makes it easy to implement a slider for comparing before-and-after images. By incorporating this library, you can enhance the usability and design of your website.
*Please use at your own risk.
Do not reuse the Google Analytics tag within the head tag of the demo page.
