"Anirudha Bhowmik comparision slider"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class=".img-comp-container"> <div class=".img-comp-img"> <img src="images/achievement.png" width="300" height="200"> </div> <div class=".img-comp-img img-comp-overlay"> <img src="images/banner1.jpg" width="300" height="200"> </div> </div> <script> /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/ initComparisons(); </script>
* {box-sizing: border-box;} .img-comp-container { position: relative; height: 200px; /*should be the same height as the images*/ } .img-comp-img { position: absolute; width: auto; height: auto; overflow:hidden; } .img-comp-img img { display:block; vertical-align:middle; } .img-comp-slider { position: absolute; z-index:9; cursor: ew-resize; /*set the appearance of the slider:*/ width: 40px; height: 40px; background-color: #2196F3; opacity: 0.7; border-radius: 50%; } .img-comp-overlay{ background-color: aqua; }
function initComparisons() { var x, i; /*find all elements with an "overlay" class:*/ x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { /*once for each "overlay" element: pass the "overlay" element as a parameter when executing the compareImages function:*/ compareImages(x[i]); } function compareImages(img) { var slider, img, clicked = 0, w, h; /*get the width and height of the img element*/ w = img.offsetWidth; h = img.offsetHeight; /*set the width of the img element to 50%:*/ img.style.width = (w / 2) + "px"; /*create slider:*/ slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); /*insert slider*/ img.parentElement.insertBefore(slider, img); /*position the slider in the middle:*/ slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; /*execute a function when the mouse button is pressed:*/ slider.addEventListener("mousedown", slideReady); /*and another function when the mouse button is released:*/ window.addEventListener("mouseup", slideFinish); /*or touched (for touch screens:*/ slider.addEventListener("touchstart", slideReady); /*and released (for touch screens:*/ window.addEventListener("touchstop", slideFinish); function slideReady(e) { /*prevent any other actions that may occur when moving over the image:*/ e.preventDefault(); /*the slider is now clicked and ready to move:*/ clicked = 1; /*execute a function when the slider is moved:*/ window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { /*the slider is no longer clicked:*/ clicked = 0; } function slideMove(e) { var pos; /*if the slider is no longer clicked, exit this function:*/ if (clicked == 0) return false; /*get the cursor's x position:*/ pos = getCursorPos(e) /*prevent the slider from being positioned outside the image:*/ if (pos < 0) pos = 0; if (pos > w) pos = w; /*execute a function that will resize the overlay image according to the cursor:*/ slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; /*get the x positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x coordinate, relative to the image:*/ x = e.pageX - a.left; /*consider any page scrolling:*/ x = x - window.pageXOffset; return x; } function slide(x) { /*resize the image:*/ img.style.width = x + "px"; /*position the slider:*/ slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } }

Related: See More


Questions / Comments: