Image Comparison Slider Script for Blogger and WordPress

Hello friends, Welcome to your pureblogtips blog. And today in this article we will learn about Image Comparison Slider Script for Blogger and WordPress (HTML + CSS + JavaScript). Also we will know what is this image Komparison slider?

By using Free Image Comparison Slider, you can make your website or blog even more attractive and profitable. All the Professional Websites that have been completed, you get to see the Image Comparison Slider Feature in the website or blog.

Before After Image Comparison Slider

If you are a Blogger or Web Designer, then you must know about this before after image slider features. You may not know much about it. So let me tell you that in this, you are compared to 2 images by sliding them together.

By the way, if you use WordPress, you can get many different plugins for WordPress. With the help of which you can easily create Image Comparison Slider in WordPress. But if you do not want to use the plugin, you can also create it using HTML, CSS and JavaScript.

Read More :

So below, I have created a Free Before / After Image Comparison Slider for you with the help of HTML Script. You will find the example below.

Image Comparison Slider HTML Script for Blogger and WordPress JavaScript

So friend if you also want to be added to this before after image slider blogger post. So it is now possible. For this, you have provided below Image Comparison Slider HTML JavaScript CSS Script. You just have to use it.

<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>

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

Conclusion – So friends, how did you like this article Comparison Slider Script for Blogger and WordPress article. And if you want some kind of problem or some kind of script, then please comment below. Also, share this article with your friends.

LEAVE A REPLY

Please enter your comment!
Please enter your name here