designer-hub/packages/app/src/components/swiper-evo.vue

<script setup lang="ts" generic="T extends Object">
withDefaults(defineProps<{ items?: T[] }>(), { items: () => [] })
const modelValue = defineModel({ type: Number, default: 0 })
const handleSwiperChange = async ({ detail: { current } }) => {
  modelValue.value = current
}
</script>
<template>
  <swiper class="w-full h-full" autoplay :current="modelValue" @change="handleSwiperChange">
    <template v-for="(it, i) in items" :key="i">
      <swiper-item>
        <div class="w-full h-full"><slot :item="it"></slot></div>
      </swiper-item>
    </template>
  </swiper>
</template>