Advertising for home services, such as lawn care, home cleaning, and garden maintenance, isn’t as simple as tossing up an […]
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
6 years ago on June 8th, 2020. Last modified on June 29th, 2020
Related To:
How applicant tracking systems are revolutionizing remote recruitment
Gone are the days of traditional recruitment. Applicant tracking systems have been revolutionizing how we hire, and their impact is here to stay. But how is the change happening? Tap to learn more about it.
Check out the New AI Features in FlexClip 5.0
In today's digital era, the importance of video content cannot be overstated. Videos have become an integral part of various […]
Effective Cleaning Tips for Maintaining a Clean and Healthy Home
We’ll explore some practical tips and tricks that will help you establish an effective cleaning routine. You might not realize […]
The Art of Visual Storytelling
How to use visual elements to tell a story Let's start with an interesting fact that will amaze you. Do […]
The Ultimate Guide to Choosing a Great Domain Name for Your Business
Choosing the right domain name for your business is a critical step in building a strong online presence. Your domain […]
6 Mistakes to Avoid When Creating a React-Native App
React Native is a leading cross-platform app development framework that has more than one and half thousand active contributors. The […]
Will Elon Musk Turn Twitter into a Super-App?
Elon Musk envisions a future where mobile apps are consolidated into one-stop shops within a single platform. Will he create a "super app" to rule them all in 2023? Learn about the challenges he faces and the potential impact on companies like Twitter and Apple's App Store.
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.
Table of Contents
Prepare Your Images
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();
});
<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%;
}
.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.
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.
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)
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.
JS code credit to jotform
Photo credit to @sharonp