Learn to Create an Image Comparison Slider with HTML, CSS & JavaScript

HTML Code (`index.html`):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Create an interactive image comparison slider that allows users to compare two images by sliding between them. Learn how to implement this feature with HTML, CSS, and JavaScript.">
    <meta name="keywords" content="image comparison slider, image slider, HTML CSS JavaScript, interactive image comparison, image compare slider tutorial, web development, compare images effect">
    <meta name="author" content="Your Name">
    <meta property="og:title" content="Create an Image Comparison Slider with HTML, CSS & JavaScript">
    <meta property="og:description" content="Create an interactive image comparison slider with HTML, CSS, and JavaScript to compare two images by sliding between them.">
    <meta property="og:image" content="image.jpg">
    <meta property="og:url" content="yourwebsite.com">
    <meta name="twitter:title" content="Create an Image Comparison Slider with HTML, CSS & JavaScript">
    <meta name="twitter:description" content="Learn to create an image comparison slider with HTML, CSS, and JavaScript. Compare two images easily with this interactive feature.">
    <meta name="twitter:image" content="image.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <title>Create an Image Comparison Slider with HTML, CSS & JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Compare Two Images</h1>

<p>Click and slide the blue slider to compare two images:</p>

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="img_snow.jpg" width="300" height="200" alt="Snow Image">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="img_forest.jpg" width="300" height="200" alt="Forest Image">
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS Code (`style.css`):

/* Universal styles for all elements */
* {
  box-sizing: border-box;
}

/* Container that holds the image comparison */
.img-comp-container {
  position: relative;
  height: 200px; /* The height should be the same as the images */
}

/* Style for the images inside the container */
.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}

/* Ensure images inside the container fit */
.img-comp-img img {
  display: block;
  vertical-align: middle;
}

/* Style for the comparison slider */
.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize; /* Indicates slider can be moved left and right */
  width: 40px;
  height: 40px;
  background-color: #2196F3; /* Blue color */
  opacity: 0.7;
  border-radius: 50%; /* Circular slider */
}

JavaScript Code (`script.js`):

// Function to initialize the image comparison functionality
function initComparisons() {
  var x, i;
  // Find all elements with the "img-comp-overlay" class
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    // Call the compareImages function for each element with the "img-comp-overlay" class
    compareImages(x[i]);
  }

  function compareImages(img) {
    var slider, w, h, clicked = 0;
    // 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 a slider element
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");

    // Insert the slider before the image
    img.parentElement.insertBefore(slider, img);

    // Position the slider in the middle of the image
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";

    // Add event listeners to handle mouse or touch actions
    slider.addEventListener("mousedown", slideReady);
    window.addEventListener("mouseup", slideFinish);
    slider.addEventListener("touchstart", slideReady);
    window.addEventListener("touchend", slideFinish);

    // When the slider is clicked, it becomes ready to move
    function slideReady(e) {
      e.preventDefault();
      clicked = 1;
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }

    // When the mouse button is released, stop moving the slider
    function slideFinish() {
      clicked = 0;
    }

    // When the slider is moved, adjust the width of the overlay image
    function slideMove(e) {
      var pos;
      if (clicked == 0) return false;

      // Get the x position of the cursor
      pos = getCursorPos(e);

      // Prevent the slider from going outside the image bounds
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;

      // Adjust the width of the image based on the cursor position
      slide(pos);
    }

    // Get the cursor's position relative to the image
    function getCursorPos(e) {
      var a, x = 0;
      e = (e.changedTouches) ? e.changedTouches[0] : e;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left;
      x = x - window.pageXOffset;
      return x;
    }

    // Resize the image and move the slider
    function slide(x) {
      img.style.width = x + "px";
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

// Execute the initComparisons function to start the image comparison functionality
initComparisons();

Explanation:

HTML Structure:
- The img-comp-container holds two images inside two div elements: one for the primary image and one for the overlay image.
- The img-comp-slider is a movable slider that lets users compare the two images.
CSS Styling:
- The .img-comp-container positions the images relative to each other, allowing the overlay to be adjusted by the slider.
- The .img-comp-slider is styled to appear as a circular button and positioned over the images.
JavaScript Functionality:
- The initComparisons() function finds all images with the class img-comp-overlay and applies the compareImages() function to each.
- The compareImages() function calculates the image dimensions, sets up the slider, and adds event listeners for mouse/touch interactions to move the slider.
- The slideMove() function adjusts the width of the overlay image based on the position of the slider, allowing users to compare the images interactively.
SEO Optimization:
- The meta title and description are optimized to include keywords like “image comparison slider” and “interactive image comparison.”
- Meta tags target relevant search terms like “web development,” “image slider,” and “HTML CSS JavaScript.”
- The images in the HTML (img_snow.jpg and img_forest.jpg) should be properly optimized for SEO, with appropriate alt attributes describing the content of each image.

Learn to Create an Image Comparison Slider with HTML, CSS & JavaScript

HTML Code (index.html):

CSS Code (style.css):

JavaScript Code (script.js):

Explanation:

Leave a Reply Cancel reply

HTML Code (`index.html`):

CSS Code (`style.css`):

JavaScript Code (`script.js`):