轮播图vue

<template>
   <div class="s">
      <div class="w" ref="w">
         <div class="one" v-for="item in list" :key="item">{{ item }}</div>
      </div>
   </div>
</template>
<script setup>
import {onMounted, ref} from "vue"

const list = ref([])
const w = ref(null)
let num = 0
onMounted(() => {
   for (let i: Number = 0; i < 10; i++) {
      list.value.push(i)
   }
   if (list.value.length % 3 == 1) {
      list.value.push(0, 1,2)
   }
   w.value.style.width = (list.value.length * 100) + (list.value.length * 20) + "px"
   time()
})
const time = () => {
   setInterval(() => {
      num++
      w.value.style.transform = `translateX(-${120*num}px)`
      w.value.style.transition = 'all .2s'
      if (num == list.value.length - 3) {
         num = 0
         setTimeout(() => {
            w.value.style.transition = 'none'
            w.value.style.transform = `translateX(0px)`

         }, 200)
      }

   }, 1000)
}
</script>
<style>
.s {
   width: 350px;
   overflow: auto;
}

.w {
   display: flex;
   transition: all .2s;
   /*width: 80px;*/
}

.one {
   width: 100px;
   height: 100px;
   margin: 0 20px;
   background: #2db5ff;
}

</style>