(Squarespace) How to enable mouse wheel scrolling on List Carousel

[tuanphan]

If you use List Carousel.

and you need to enable mouse wheel scrolling, you can use this code to Code Injection > Footer.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const carousel = document.querySelector(".user-items-list-carousel._carousel_slides-initialized");
    if (!carousel) return;
    // Horizontal scroll with mouse wheel / trackpad
    carousel.addEventListener("wheel", function (e) {
      if (e.deltaY !== 0) {
        e.preventDefault();
        carousel.scrollLeft += e.deltaY;
      }
    }, { passive: false });
    // Swipe gesture on mobile
    let startX = 0;
    carousel.addEventListener("touchstart", (e) => {
      startX = e.touches[0].clientX;
    });
    carousel.addEventListener("touchmove", (e) => {
      if (!startX) return;
      const deltaX = startX - e.touches[0].clientX;
      carousel.scrollLeft += deltaX;
      startX = e.touches[0].clientX;
    });
  });
</script>

If you want to apply it on specific Carousel, you can find Carousel List ID.

then use this new code to Code Injection > Footer

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const carousel = document.querySelector('section[data-section-id="687f457a48f6e456d8c30e83"] .user-items-list-carousel._carousel_slides-initialized');
    if (!carousel) return;
    // Horizontal scroll with mouse wheel / trackpad
    carousel.addEventListener("wheel", function (e) {
      if (e.deltaY !== 0) {
        e.preventDefault();
        carousel.scrollLeft += e.deltaY;
      }
    }, { passive: false });
    // Swipe gesture on mobile
    let startX = 0;
    carousel.addEventListener("touchstart", (e) => {
      startX = e.touches[0].clientX;
    });
    carousel.addEventListener("touchmove", (e) => {
      if (!startX) return;
      const deltaX = startX - e.touches[0].clientX;
      carousel.scrollLeft += deltaX;
      startX = e.touches[0].clientX;
    });
  });
</script>