PIT Designs Logo

How to Create Before & After Slider in Oxygen

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


Posted 4 months 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 (2 Reviews)
Do we all agree that Coffee is the fuel that feeds the free content creating?
6 Ultimate Content Marketing Writing Techniques to Boost Audience Rate

Are you seeking the best ways to improve your content creation? Are you excited to master your marketing development strategy? […]

How to Choose Professional Fonts for Web Design

Fortunately, the days when fonts and colors were chosen at random have long passed. Now each element of the site […]

How to Write Design Brief for Web Design Projects

Got a big web design project coming up? Then you'll need a great design brief for web design, to carry […]

Adobe CC Updates Focused on Collaboration & Remote Work

Adobe's June updates to its Creative Cloud suite comes with changes directly aimed at making collaboration and remote-work better and […]

6 Ways Erbil International Hotel Complies with COVID-19 Safety

Erbil International Hotel, have activated the "Health and Safety program" which ensures customers, from the moment they enter the property until leaving.

Starting Online Business in Iraq

As part of our business launching & partnership programs. We help you kick start your project online, and start making […]

Drawing Anatomy & Art: A Place for Artistic Freedom

Art, in its broadest sense, is a form of communication. It's been known and shown throughout history how mankind used […]

Leave a Reply

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

chevron-downmenu-circlecross-circle