PIT Designs Logo

How to Create Before & After Slider in Oxygen

About the author: Ninos
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 1 month ago on June 8th, 2020. Last modified on June 29th, 2020



Before & After slider is a cool effect, used to provide a real-time sense of comparison of two images.

If you're building a website for fitness trainer (such as what we're doing for RYSTRENGTH), makeup artist, construction, car repair, etc..

Here's what we will be creating.

How to Create Before & After Slider in Oxygen

Prepare Your Images

Make sure both of your photos are the same size, and proportional. So the effect is more appealing.
To get you started, I've uploaded the exact images I used in the demo, so grab them from here before - after

Add The Before-After JavaScript

Add a code block, in the HTML section add this code:

<script type="text/javascript" src="https://cdn.jotfor.ms/before-after/before-after.min.js"> </script>

Then move to the JavaScript section, and add this jQuery code:

jQuery(document).ready(function($) {
jQuery('.ba-slider').beforeAfter();
});

Add CSS

Within the same code block, head over to the CSS section, and here's the code:

.ba-slider {
position: relative;
overflow: hidden;
}
.ba-slider img {
width: 100%;
display:block;
max-width:none;
}
.ba-slider .resize {
position: absolute;
top:0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
}
.ba-slider .handle {
position:absolute;
left:50%;
top:0;
bottom:0;
width:4px;
margin-left:-2px;
background: #ffffff;
cursor: ew-resize;
}
.ba-slider .handle:after {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin: -32px 0 0 -24px;
content: '\2194';
color: black;
font-size: 28px;
text-align: center;
background: #ffffff;
border-radius: 50%;
}

Create The First Div

Add a Div, give it class ba-slider
And rename it baslider div
Add your first image (the before image) inside baslider div.

Create the Second Div

before-after-slider-structure

The second div, should be nested under the first one.
Assign the class to it resize.
Rename it as resize div.
Add your second image (the after image) inside resize div.

refer to image above for the structure.

Create the Slider Handler

Last step is to add a third div, assign class handle
This goes under the main div (baslider div)


And now you have a before & after slider in Oxygen, without plugins or bloat.

P.S Your slider mgiht look like this image below, that's ok. On the front end it renders perfectly fine.

before-&-after-slider-in-oxygen

JS code credit to jotform

Photo credit to @sharonp

5/5 (1 Review)
Do we all agree that Coffee is the fuel that feeds the free content creating?
How to Choose Commercial Cleaning in Erbil

How to find the right company for commercial cleaning in Erbil - Iraq? With the current global pandemic situation, work […]

Is 2020 a Good Time to Start a Career in Tech?

In terms of demand, the tech field has become what in the past used to be the stock market. Back […]

Interview & Business Lessons From Paul's Hair Port

It is a remarkable milestone when a business celebrates its 20th year anniversary in business. Paul’s Hair Port, located in […]

Should You Trust Kuraz Insurance Company in Erbil?

Kuraz insurance company based in Erbil. Claims to be professionals in the business of ensuring your health, assets, travel, and […]

How to Create Before & After Slider in Oxygen

Before & After slider is a cool effect, used to provide a real-time sense of comparison of two images. If […]

Title With Lines On Sides in Oxygen (CSS Only)

Working on a website, I needed to create a title with lines on sides. A sort of text-decoration-cool-design-thing. That looks […]

How to Create Animated Number Counters in Oxygen

Animated number counters are seen on many landing pages. They bring a cool effect (movement) to the page and convey […]

Leave a Reply

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

chevron-downmenu-circlecross-circle