Image Comparison Slider Script Code-Make Money Online

Hey, this is your mentor Hamza Ali here, today I am going to share with you Image Comparison Slider Script for Blogger and WordPress (HTML+CSS+JavaScript) code. The question is what is the image comparison slider script answer is this is a website tool or script. For example, if you want to image comparison for your website then you can use this tool. The great thing about this tool is that it’s free to use or anyone can easily use this image comparison slider script.

By using this Free Image Comparison Slider script on your blog or website, you can make your website even more attractive and profitable.

Before After Image Comparison Slider

If you are a professional web designer, then you would be known about this before after image slider features. In this SCRIPT you have to comparison by sliding 2 images together.

If you want to use this image comparison tool, then many different plugins are available for WordPress. You can add any plugin with the help of which you can easily create an Image Comparison Slider in WordPress. But if you do not want to use a plugin, then you can also create one using HTML, CSS, and JavaScript.

ICM HTML Script for Blogger and WordPress JavaScript.

Or if you want to add to this before and after image slider script in the blogger blog So it’s possible now. For this, you have to provide Image Comparison Slider HTML JavaScript CSS Script. You just have to use the below code.

Note – 1.png and 2.png would be replaced with two different image URLs.

How to add blogger

Open your blogger dashboard and create a new blog Like blog URL imagecomparisonsliderscript.blogspot.com and then add any title or save the changes it will redirect to you your main dashboard of imagecomparisonsliderscript blog. After that open the theme option and

Copy Your Code:

 <style>  
 :root {  
  --slider-width: 50rem;  
  --slider-height: 30rem;  
 }  
 .compare {  
  position: relative;  
  height: var(--slider-height);  
  width: var(--slider-width);  
 }  
 .compare__image {  
  position: absolute;  
  height: var(--slider-height);  
  width: var(--slider-width);  
  border-radius: 0.4rem;  
  overflow: hidden;  
  user-select: none;  
  pointer-events: none;  
 }  
 .compare__image img {  
  height: var(--slider-height);  
  width: var(--slider-width);  
  object-fit: cover;  
 }  
 .compare__slider {  
  position: absolute;  
  z-index: 1;  
  width: 3.6rem;  
  height: 3.6rem;  
  background: #121212;  
  border: 0.1rem solid rgba(255, 255, 255, 0.1);  
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.8);  
  border-radius: 50%;  
  cursor: grab;  
  transition: border-color 0.2s;  
 }  
 .compare__slider:active {  
  border: 0.1rem solid rgba(255, 255, 255, 0.3);  
  cursor: grabbing;  
 }  
 </style>  
 <div class="compare">  
  <div class="compare__image">  
   <img src="1.png">  
  </div>  
  <div class="compare__image compare__overlay">  
   <img src="2.png">  
  </div>  
 </div>  
 <script>  
 let isClicked = false;  
 const image = document.querySelector(".compare__overlay");  
 const width = image.offsetWidth;  
 const height = image.offsetHeight;  
 const slider = document.createElement("div");  
 compare();  
 function compare() {  
  image.parentElement.insertBefore(slider, image);  
  slider.classList.add("compare__slider");  
  slider.style.top = height / 2 - slider.offsetHeight / 2 + "px";  
  slider.style.left = width / 2 - slider.offsetWidth / 2 + "px";  
  image.style.width = "50%";  
  slider.addEventListener("mousedown", onSlideStart);  
  slider.addEventListener("touchstart", onSlideStart);  
  window.addEventListener("mouseup", () => (isClicked = false));  
  window.addEventListener("touchstop", () => (isClicked = false));  
  window.addEventListener("mousemove", onSlideMove);  
  window.addEventListener("touchmove", onSlideMove);  
 }  
 function onSlideStart(event) {  
  event.preventDefault();  
  isClicked = true;  
 }  
 function onSlideMove(event) {  
  if (!isClicked) return;  
  doSlide(currentPosition(event));  
 }  
 function currentPosition(event = window.event) {  
  let xImage = image.getBoundingClientRect();  
  let x = 0;  
  x = event.pageX - xImage.left;  
  if (x < 0) x = 0;  
  if (x > width) x = width;  
  return x;  
 }  
 function doSlide(x) {  
  image.style.width = x + "px";  
  slider.style.left = image.offsetWidth - slider.offsetWidth / 2 + "px";  
 }  
 </script>  

Leave a Comment