<style>
  .custom-image-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 0;
    padding-bottom: 75%; /* Adjust this value according to your image aspect ratio */
  }
  .slider-before, .slider-after {
    position: absolute;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    user-select: none;
  }
  .slider-after {
    overflow: hidden;
  }
  .slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: #fff;
    cursor: ew-resize;
  }
  .slider-handle::before, .slider-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    cursor: ew-resize;
    transition: all 0.2s ease-out;
  }
  .slider-handle::before {
    left: -24px;
    border-right: 16px solid #fff;
  }
  .slider-handle::after {
    right: -24px;
    border-left: 16px solid #fff;
  }
  /*REMOVING THE SPACE UNDER CODE BLOCKS IN SQUARESPACE 7.1 WHEN USING FLUID ENGINE*/
  html.squarespace-damask .sqs-blockStatus,
  .sqs-block .removed-script {
    display: none;
  }
</style>

<div class="custom-image-slider">
  <img class="slider-before" src="https://images.squarespace-cdn.com/content/6992d0eb2289e056087f5553/1bef3799-821c-43e2-8609-ff528c6398d8/IMG_2668+2.jpg" alt="Before">
  <img class="slider-after" src="https://images.squarespace-cdn.com/content/6992d0eb2289e056087f5553/8133d300-7118-4b90-8060-850c66c03107/IMG_2671+2.jpg" alt="After">
  <div class="slider-handle"></div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const sliders = document.querySelectorAll(".custom-image-slider");
    sliders.forEach(function (container) {
      const afterImage = container.querySelector(".slider-after");
      const handle = container.querySelector(".slider-handle");
      const initialPercentage = 50;
      handle.style.left = `${initialPercentage}%`;
      afterImage.style.clipPath = `inset(0 ${100 - initialPercentage}% 0 0)`;
      let dragging = false;
      
      const onMouseMove = (e) => {
        if (!dragging) return;
        const rect = container.getBoundingClientRect();
        const x = e.clientX - rect.left;
        let widthPercentage = (x / rect.width) * 100;
        widthPercentage = Math.max(0, Math.min(widthPercentage, 100));
        window.requestAnimationFrame(() => {
          handle.style.left = `${widthPercentage}%`;
          afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
        });
      };
      
      const onTouchMove = (e) => {
        if (!dragging) return;
        const rect = container.getBoundingClientRect();
        const x = e.touches[0].clientX - rect.left;
        let widthPercentage = (x / rect.width) * 100;
        widthPercentage = Math.max(0, Math.min(widthPercentage, 100));
        window.requestAnimationFrame(() => {
          handle.style.left = `${widthPercentage}%`;
          afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
        });
      };
      
      const stopDragging = () => {
        dragging = false;
        document.removeEventListener("mousemove", onMouseMove);
        document.removeEventListener("touchmove", onTouchMove);
        document.removeEventListener("mouseup", stopDragging);
        document.removeEventListener("touchend", stopDragging);
      };
      
      // Mouse events
      handle.addEventListener("mousedown", (e) => {
        dragging = true;
        e.preventDefault();
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", stopDragging);
      });
      
      // Touch events
      handle.addEventListener("touchstart", (e) => {
        dragging = true;
        e.preventDefault();
        document.addEventListener("touchmove", onTouchMove);
        document.addEventListener("touchend", stopDragging);
      });
    });
  });
</script>