Help with Custom Scrollable Carousel Design (Trackpad and Arrows Compatibility)

Hi everyone,

I’m working on a website and struggling to create the desired design for my carousels. Here’s what I’m trying to achieve:

  1. Scrollable Carousel:
  • The carousel should be scrollable horizontally with a trackpad.
  • Arrows should disappear when the user scrolls with the trackpad but remain visible for mouse users.
  1. Centered Design:
  • The carousel should start centered when the user lands on the site, showing three projects in the middle.
  • On both sides, the carousel should extend beyond the current page padding (4VW) so that the next and previous projects peek out slightly.

Here’s a live link to my site: https://www.altitude101.com/.
Here is the read only link: Webflow - altitude.101

The “Our Work” slider on the homepage is what I’m trying to replicate for the project pages.

The issue:
Whenever I adjust the padding or alignment to achieve this look, the slider breaks. Does anyone know how to format the layout of each carousel element to create the desired effect?

Thanks in advance!