Before and After Slider using jQuery

In this article, we will understand the before and after slider using jQuery. It is used for comparing before and after images side by side. In this we use range slider that allows user to control how the two image display on the screen.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Before and After Slider using  jQuery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
.ba-card {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  margin-top: 20px;
  box-shadow: 0px 7px 43px -6px rgba(0, 0, 0, 0.75);
}
.ba-card::after {
  clear: both;
  content: "";
  display: block;
}
.ba-card img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .ba-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .ba-card::after {
    clear: both;
    content: "";
    display: block;
  }
}
a {
  text-decoration: none;
}
a:link, a:visited {
  color: #666;
}
a:hover, a:focus {
  border-bottom: 1px solid #666;
}
.twenty-horizontal .twenty-handle:before, .twenty-horizontal .twenty-handle:after, .twenty-vertical .twenty-handle:before, .twenty-vertical .twenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-horizontal .twenty-handle:before, .twenty-horizontal .twenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px;
}
.twenty-vertical .twenty-handle:before, .twenty-vertical .twenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px;
}
.twenty-before-label, .twenty-after-label, .twenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.twenty-before-label, .twenty-after-label, .twenty-overlay {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.twenty-before-label, .twenty-after-label {
  -webkit-transition-property: opacity;
    transition-property: opacity;
}
.twenty-before-label:before, .twenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.twenty-horizontal .twenty-before-label:before, .twenty-horizontal .twenty-after-label:before {
  top: 50%;
  margin-top: -19px;
}
.twenty-vertical .twenty-before-label:before, .twenty-vertical .twenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px;
}
.twenty-left-arrow, .twenty-right-arrow, .twenty-up-arrow, .twenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
}
.twenty-left-arrow, .twenty-right-arrow {
  top: 50%;
  margin-top: -6px;
}
.twenty-up-arrow, .twenty-down-arrow {
  left: 50%;
  margin-left: -6px;
}
.twenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.twenty-container img {
  max-width: 100%;
  position: absolute;
  top: 0;
  display: block;
}
.twenty-container * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.twenty-before-label:before {
  content: "Before";
}
.twenty-after-label {
  opacity: 1;
}
.twenty-after-label:before {
  content: "After";
}
.twenty-horizontal .twenty-before-label:before {
  left: 10px;
}
.twenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25;
}
.twenty-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}
.twenty-overlay:hover .twenty-after-label, .twenty-before-label {
  opacity: 1;
}
.twenty-before, .twenty-after {
  z-index: 20;
}
.twenty-horizontal .twenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-vertical .twenty-handle:before {
  left: 50%;
  margin-left: 22px;
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-vertical .twenty-handle:after {
  right: 50%;
  margin-right: 22px;
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
.twenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}
.twenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px;
}
.twenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px;
}
.twenty-before-label:before, .twenty-after-label:before {
  color: #666b7a;
  font-size: 23px;
  letter-spacing: 0.1em;
}
.twenty-handle {
  height: 38px;
  width: 38px;
  background-color: #3c667e;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -22px;
  margin-top: -12px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer;
}
.twenty-before-label:before, .twenty-after-label:before {
  color: #233e8f;
  font-size: 23px;
  letter-spacing: 0.1em;
}
</style>
<body>
<h1> Example: Before and After Slider Using jquery </h1>
<div class = "ba-card">
	<div class = "horizontal-ba">
<img src = "https://static.companycam.com/rQmyi0raeeA1457553857.jpg"> <img src = "https://static.companycam.com/0wYEGR0UEV41457553857.jpg>
	</div>
</div>
<script>
(function (module) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], module);
	} else {
		module(jQuery);
	}
})(function(jQuery, undefined) {
			    threshold = 6,
	    add = jQuery.event.add,
	    remove = jQuery.event.remove,
	    trigger = function(node, type, data) {
	    	jQuery.event.trigger(type, data, node);
	    };
	    mouseevents = {
	    	move: 'mousemove',
	    	cancel: 'mouseup dragstart',
	    	end: 'mouseup'
	    },
	    touchevents = {
	    	move: 'touchmove',
	    	cancel: 'touchend',
	    	end: 'touchend'
	    };	
	function Timer(fn){
		var callback = fn,
		    active = false,
		    running = false;	
		function trigger(time) {
			if (active){
				callback();
				requestFrame(trigger);
				running = true;
				active = false;
			}
			else {
				running = false;
			}
		}	
		this.kick = function(fn) {
	function returnTrue() {
		return true;
	}
	function returnFalse() {
		return false;
	}
	function preventDefault(e) {
		e.preventDefault();
	}
	function preventIgnoreTags(e) {
			if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }	
		e.preventDefault();
	}
	function isLeftButton(e) {
		return (e.which === 1 && !e.ctrlKey && !e.altKey);
	}
	
	function changedTouch(e, event) {
		var touch = identifiedTouch(e.changedTouches, event.identifier);
		if (!touch) { return; }
pageX === event.pageX && touch.pageY === event.pageY) { return; }
		return touch;
	}
	function mousedown(e){
		var data;
		if (!isLeftButton(e)) { return; }
		data = {
			target: e.target,
			startX: e.pageX,
			startY: e.pageY,
			timeStamp: e.timeStamp
		};
		add(document, mouseevents.move, mousemove, data);
		add(document, mouseevents.cancel, mouseend, data);
	}
	function mousemove(e){
		var data = e.data;
		checkThreshold(e, data, e, removeMouse);
	}
	function mouseend(e) {
		removeMouse();
	}
	function removeMouse() {
		remove(document, mouseevents.move, mousemove);
		remove(document, mouseevents.cancel, mouseend);
	}
	function touchstart(e) {
		var touch, template;
		if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
		touch = e.changedTouches[0];
		template = {
			target: touch.target,
			startX: touch.pageX,
			startY: touch.pageY,
			timeStamp: e.timeStamp,
			identifier: touch.identifier
		};
		add(document, touchevents.move + '.' + touch.identifier, touchmove, template);
		add(document, touchevents.cancel + '.' + touch.identifier, touchend, template);
	}
	function touchmove(e){
		var data = e.data,
		    touch = changedTouch(e, data);
		if (!touch) { return; }
		checkThreshold(e, data, touch, removeTouch);
	}
	function touchend(e) {
		var template = e.data,
		    touch = identifiedTouch(e.changedTouches, template.identifier);
		if (!touch) { return; }
		removeTouch(template.identifier);
	}
	function removeTouch(identifier) {
		remove(document, '.' + identifier, touchmove);
		remove(document, '.' + identifier, touchend);
	}
	function checkThreshold(e, template, touch, fn) {
		var distX = touch.pageX - template.startX,
		    distY = touch.pageY - template.startY;
		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
		triggerStart(e, template, touch, distX, distY, fn);
	}
	function handled() {
		this._handled = returnTrue;
		return false;
	}
function activeMousemove(e) {
		var timer = e.data.timer;
		e.data.touch = e;
		e.data.timeStamp = e.timeStamp;
		timer.kick();
	}
	function activeMouseend(e) {
		var event = e.data.event,
		    timer = e.data.timer;
		removeActiveMouse();
		endEvent(event, timer, function() {
			setTimeout(function(){
				remove(event.target, 'click', returnFalse);
			}, 0);
		});
	}
	function removeActiveMouse(event) {
		remove(document, mouseevents.move, activeMousemove);
		remove(document, mouseevents.end, activeMouseend);
	}
	function activeTouchmove(e) {
		var event = e.data.event,
		    timer = e.data.timer,
		    touch = changedTouch(e, event);
		if (!touch) { return; }
		e.preventDefault();
		event.targetTouches = e.targetTouches;
		e.data.touch = touch;
		e.data.timeStamp = e.timeStamp;
		timer.kick();
	}
	function activeTouchend(e) {
		var event = e.data.event,
		    timer = e.data.timer,
		    touch = identifiedTouch(e.changedTouches, event.identifier);
		if (!touch) { return; }
		removeActiveTouch(event);
		endEvent(event, timer);
	}
            function removeActiveTouch(event) {
		remove(document, '.' + event.identifier, activeTouchmove);
		remove(document, '.' + event.identifier, activeTouchend);
	}
	function endEvent(event, timer, fn) {
		timer.end(function(){
			event.type = 'moveend';
			trigger(event.target, event);		
			return fn && fn();
		});
	}
function setup(data, namespaces, eventHandle) {
		add(this, 'movestart.move', flagAsHandled);
		return true;
	}
	function addMethod(handleObj) {
		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
			return;
		}
		add(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid, preventDefault, undefined, handleObj.selector);
		add(this, 'mousedown.' + handleObj.guid, preventIgnoreTags, undefined, handleObj.selector);
	}
	function removeMethod(handleObj) {
		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
			return;
		}	
		remove(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid);
		remove(this, 'mousedown.' + handleObj.guid);
	}	
	jQuery.event.special.movestart = {
		setup: setup,
		add: addMethod,
		remove: removeMethod,
		_default: function(e) {
			var event, data;
			if (!e._handled()) { return; }
			function update(time) {
				updateEvent(event, data.touch, data.timeStamp);
				trigger(e.target, event);
			}
			data = {
				event: event,
				timer: new Timer(update),
				touch: undefined,
				timeStamp: undefined
			};	
			if (e.identifier === undefined) {
				add(e.target, 'click', returnFalse);
				add(document, mouseevents.move, activeMousemove, data);
				add(document, mouseevents.end, activeMouseend, data);
			}
			else {
				e._preventTouchmoveDefault();
				add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
				add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
			}
		}
	};
	jQuery.event.special.moveend = {
		setup: function() {
			add(this, 'movestart.moveend', jQuery.noop);
		},
	add(document, 'mousedown.move', mousedown); 
	if (typeof Array.prototype.indexOf === 'function') {
		(function(jQuery, undefined){
			var props = ["changedTouches", "targetTouches"],
			    l = props.length;	
			while (l--) {
				if (jQuery.event.props.indexOf(props[l]) === -1) {
					jQuery.event.props.push(props[l]);
				} }
		})(jQuery);
	}; });
 (function($){
  $.fn.twenty = function(options) {
    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
    return this.each(function() {
      var sliderPct = options.default_offset_pct;
      var container = $(this);
      var sliderOrientation = options.orientation;
      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
      container.wrap("<div class='twenty-wrapper twenty-" + sliderOrientation + "'></div>");
      container.append("<div class='twenty-overlay'></div>");
      var beforeImg = container.find("img:first");
      var afterImg = container.find("img:last");
      container.append("<div class='twenty-handle'></div>");
      var slider = container.find(".twenty-handle");
      slider.append("<span class='twenty-" + beforeDirection + "-arrow'></span>");
      slider.append("<span class='twenty-" + afterDirection + "-arrow'></span>");
      var adjustContainer = function(offset) {
      	if (sliderOrientation === 'vertical') {
      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
      	}
      	else {
          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
    	}
        container.css("height", offset.h);
      };
      var adjustSlider = function(pct) {
        var offset = calcOffset(pct);
        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
        adjustContainer(offset);
      }
      $(window).on("resize.twenty", function(e) {
        adjustSlider(sliderPct);
      });
        container.addClass("active");
        offsetX = container.offset().left;
        offsetY = container.offset().top;
        imgWidth = beforeImg.width(); 
        imgHeight = beforeImg.height();          
      });
      slider.on("moveend", function(e) {
        container.removeClass("active");
      });
      container.find("img").on("mousedown", function(event) {
        event.preventDefault();
      });
      $(window).trigger("resize.twenty");
    });
  };
})(jQuery);
$(window).load(function(){
  $(".horizontal-ba").twenty({
    default_offset_pct: 0.7,
    orientation: 'horizontal'
  });
});
$(window).load(function(){
  $(".vertical-ba").twenty({
    default_offset_pct: 0.7,
    orientation: 'vertical'
  });
});
</script>
</body>
</html>

Explanation:

In the above example, we created a example of before and after slider using jquery. In this we have two images for comparison, one effective, and another simple UI element. We used jQuer based before after viewer that can be used to compare two images with a draggable & swipeable slider.

Output:

Following is the output of this example.

Next TopicRound Slider jQuery Plugin

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}