How to make a Gallery?

[9mm]

I'm trying to make a swipe gallery with multiple images:

  <div class="gallery">
    <div ref="anchor" class="gallery-images" :style="{width: `${screenWidth * 6}px`}">
      <img v-for="image in images" :key="image" :src="require(`@/assets/images/${image}`)" :style="{width: `${screenWidth}px`}">
    </div>
  </div>

JS:

  setup() {
    // TODO dynamically change
    const screenWidth = ref(375);

    const anchor = ref();

    const { motionProperties } = useMotionProperties(anchor, {
      cursor: 'grab',
      x: 0,
      y: 0,
    });

    const { set } = useSpring(motionProperties);

    const dragHandler = ({ movement: [x], dragging }) => {
      if (!dragging) {
        set({ x: 0, y: 0, cursor: 'grab' });
        return;
      }

      set({ x, y: 0, cursor: 'grabbing' });
    };

    useDrag(dragHandler, {
      domTarget: anchor,
    });

    return {
      anchor,
      screenWidth,
    };
  },

CSS

.gallery {
  @apply overflow-x-hidden;
}
.gallery-images {
  @apply flex flex-row justify-start items-start;
}

It works fine on mobile but on desktop, I can see it changing the cursor and attempting to change the translateZ (it changes for 1ms and changes back to zero), from there it just stays zero and on desktop it wont drag.

If I use incognito device emulation and make the device very large, same as regular desktop, it DOES work, so maybe it has to do with gestures / mouse not being 1:1 consistent?