<template>
  <div>
    <v-carousel height="80" :show-arrows="false" hide-delimiters cycle>
      <!-- <template v-slot:prev="{ props }">
        <v-btn
          tonal
          plain
          size="x-small"
          icon="$prev"
          variant="elevated"
          @click="props.onClick"
        ></v-btn>
      </template>
      <template v-slot:next="{ props }">
        <v-btn
          tonal
          plain
          size="x-small"
          icon="$next"
          variant="elevated"
          @click="props.onClick"
        ></v-btn>
      </template> -->
      <v-carousel-item
        src="@/assets/headerBg.png"
        cover
      >
      </v-carousel-item>
      <!-- <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        :src="item.src"
        cover
      ></v-carousel-item> -->
    </v-carousel>
  </div>
</template>

<script setup>
// import { ref } from 'vue'

defineOptions({ name:'personal-headCarousel'})

// const items = ref([
//   // { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', },
//   // { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg', },
//   // { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg', },
//   { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg', },
// ])
</script>

<style lang="scss" scoped>
</style>
