vue.js swipe

<template>
  <div class="swipe-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <div class="swipe-wrapper" :style="{ transform: `translateX(${translateX}px)` }">
      <div class="swipe-item">Slide 1</div>
      <div class="swipe-item">Slide 2</div>
      <div class="swipe-item">Slide 3</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const startX = ref(0);
    const translateX = ref(0);

    const handleTouchStart = (event) => {
      startX.value = event.touches[0].pageX;
    };

    const handleTouchMove = (event) => {
      const moveX = event.touches[0].pageX - startX.value;
      translateX.value = moveX;
    };

    return {
      handleTouchStart,
      handleTouchMove,
      translateX
    };
  }
};
</script>

<style>
.swipe-container {
  overflow: hidden;
  width: 100%;
}

.swipe-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.swipe-item {
  min-width: 100%;
  box-sizing: border-box;
}
</style>