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 2 years ago on June 8th, 2020. Last modified on June 29th, 2020

Related To:

How Do I Choose The Right Target Market For My Small Business?

If you are looking for the question” How To identify what are your target customers?” click here to get the answer. You should consider some factors too

Creative scrolling in websites: Types of design and best practices

Scrolling is a no-brainer process for people using different types of screens. It has become an important and unavoidable part […]

What are the pros and cons of React Development

It is a component-based JavaScript library established by Facebook. Respond makes it easier to establish interactive UI utilizing elements and […]

12 Things to Know about Engineering Recruitment Agencies

A recruitment agency adds to the business by leading recruitment drives and possible recruitment possibilities for associations that don't have […]

The Best Ways to Make Projects Visualization Better

Each company strives to fully and efficiently plan, implement, and close projects while meeting the needs of its customers down […]

How a Healthy Lifestyle Can Give You an Advantage in Business

In this article, we look at the connection between a healthy lifestyle and how it can give you an advantage in business.

Storytelling: Why Is It Important for Business and Marketing?

Storytelling is an important part of marketing. It is almost synonymous with a successful business.

Vivaldi Browser Autocomplete Not Working (FIXED)

An easy fix for Vivaldi browser autocomplete not working

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.

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

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

Do we all agree that Coffee is the fuel that feeds the free content creating?