menduner/src/views/Home/personal/components/headCarousel.vue

<template>
  <div>
    <v-carousel height="80" show-arrows="hover" 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
        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>