How can I create a carousel that enlarges the centre image while scrolling?

Site URL: https://dream-big-travels.squarespace.com/

Hi, I am looking for a carousel that significantly increases the centre image as you scroll (see example screenshot). is it possible?

your site is private , I can' access. I am giving a solution . 

Add this code into custom css:

#scroll-image {
  width: 100px; /* Starting width */
  height: auto; /* Maintain aspect ratio */
  transition: width 0.3s ease, height 0.3s ease; /* Smooth resizing */
}

Here #scroll-image will be replaced by your targeted image id. 

Then add this code into code injection>footer:

document.addEventListener("DOMContentLoaded", function () {
  const scrollImage = document.getElementById("scroll-image");
  let lastScrollY = window.scrollY;

  window.addEventListener("scroll", function () {
    const currentScrollY = window.scrollY;

    if (scrollImage) {
      if (currentScrollY > lastScrollY) {
        // User is scrolling down, increase image size
        scrollImage.style.width = "150px"; // Adjust size as needed
      } else {
        // User is scrolling up, decrease image size
        scrollImage.style.width = "100px"; // Adjust size as needed
      }
    }

    // Update the last scroll position
    lastScrollY = currentScrollY;
  });
});

Here  scroll-image will be replaced by your image id.  

Thanks, I'll give it a go