Hwo to modify before & after image section

[CreatorTim]

Hey guys, I added a before and after image section to my store. But I need help with one thing.

I want that when I click on the "BEFORE" or "AFTER" heading on mobile, it smoothly scrolls to the before/after image.

Here’s the JavaScript code I used for that, and if needed, I can also provide the CSS styling and HTML structure.

Code:

<script>
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".container");
  const imageBefore = container.querySelector(".image-before");
  const sliderLine = container.querySelector(".slider-line");
  const sliderButton = container.querySelector(".slider-button");
  const beforeBadge = container.querySelector(".before_badge");
  const afterBadge = container.querySelector(".after_badge");

  let isTouching = false; // Check for mobile touch
  let lastPosition = 50; // Default slider position (50%)
  const isMobile = window.matchMedia("(max-width: 768px)").matches; // Detect mobile devices

  function updateSlider(positionX, containerRect) {
    const mouseX = positionX - containerRect.left;
    const positionPercent = Math.min(Math.max((mouseX / containerRect.width) * 100, 0), 100);

    // Save the last position for mobile devices
    if (isMobile) {
      lastPosition = positionPercent;
    }

    // Update slider position
    setSliderPosition(positionPercent);
  }

  function setSliderPosition(positionPercent, animate = false) {
    if (positionPercent < 0) positionPercent = 0;
    if (positionPercent > 100) positionPercent = 100;

    if (animate) {
      imageBefore.style.transition = "width 0.3s ease"; // Smooth effect with shorter duration
      sliderLine.style.transition = "left 0.3s ease";
      sliderButton.style.transition = "left 0.3s ease";
    } else {
      imageBefore.style.transition = "none"; // No animation
      sliderLine.style.transition = "none";
      sliderButton.style.transition = "none";
    }

    imageBefore.style.width = `${positionPercent}%`;
    sliderLine.style.left = `${positionPercent}%`;
    sliderButton.style.left = `${positionPercent}%`;

    // Update the last position
    lastPosition = positionPercent;
  }

  function resetSlider() {
    if (!isMobile) {
      setSliderPosition(50, true); // Return to center with animation
      showLabels(); // Show labels
    }
  }

  function restoreLastPosition() {
    if (isMobile) {
      setSliderPosition(lastPosition); // Restore last position on mobile
    }
  }

  function hideLabels() {
    beforeBadge.style.opacity = "0"; // Hide labels
    afterBadge.style.opacity = "0";
  }

  function showLabels() {
    beforeBadge.style.opacity = "1"; // Show labels
    afterBadge.style.opacity = "1";
  }

  // Desktop - mouse movement
  container.addEventListener("mousemove", (event) => {
    if (!isMobile) {
      const rect = container.getBoundingClientRect();
      updateSlider(event.clientX, rect);
      hideLabels(); // Hide labels
    }
  });

  container.addEventListener("mouseleave", () => {
    resetSlider(); // Return to center with animation on desktop
  });

  container.addEventListener("mouseenter", () => {
    if (!isMobile) {
      hideLabels(); // Hide labels
    }
  });

  // Mobile - touch devices
  container.addEventListener("touchstart", (event) => {
    isTouching = true;
    const rect = container.getBoundingClientRect();
    const touch = event.touches[0];
    updateSlider(touch.clientX, rect);
    hideLabels(); // Hide labels
    event.preventDefault(); // Prevent scrolling
  });

  container.addEventListener("touchmove", (event) => {
    if (isTouching) {
      const rect = container.getBoundingClientRect();
      const touch = event.touches[0];
      updateSlider(touch.clientX, rect);
      event.preventDefault(); // Prevent scrolling
    }
  });

  container.addEventListener("touchend", () => {
    isTouching = false;
    restoreLastPosition(); // Maintain last position on mobile
    showLabels(); // Show labels
  });

  // Ensure the last position remains during scrolling
  window.addEventListener("scroll", () => {
    if (isMobile) {
      restoreLastPosition(); // Restore last position on mobile during scroll
    }
  });
});
</script>

Here’s the link to my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll almost to the bottom, that’s where the section is)

And here’s a store where it works how I want it: https://tomnoske.store/products/cinema-luts
(Just scroll almost to the bottom, that’s where the section is)

I want this fix for the click on the before/after only on mobile!

Thanks a lot,
Tim