1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <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>
|