How to use visual elements to tell a story Let's start with an interesting fact that will amaze you. Do […]
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
3 years ago on June 8th, 2020. Last modified on June 29th, 2020
Related To:
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.
8 Steps to Start Your Shirt Printing Business like a Pro
The custom design market is rising daily, and its demand is relatively easy to fulfil if you have the right […]
What Is Out-Of-Home Advertising - Types & Strategies
OOH, or out-of-home advertising has been around for a long and is still one of the best ways to contact […]
Best Tools That Make Content Readability Better
These three best tools can enhance content readability: 1) Paraphrasetool.ai 2) Word-counter.io 3) Hemingway Editor. Use these tools and achieve perfection in your work.
How to Lock Entire WordPress Website for the Public Without Plugins
You can lock your entire WordPress website and make it only visible to logged-in users without using a plugin by adding a simple code.
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