mingnan-website/src/components/content/ImageSwiper.vue

<template>
  <Carousel 
    v-bind="carouselConfig"
    @slide-end="(i) => $emit('switch', i)"
  >
    <Slide v-for="(slide, index) in items" :key="index">
      <slot name="item" :index="index" :item="slide" />
    </Slide>
    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'

defineEmits([	
  "switch"	
])

const props = defineProps({	
  items : {
    type: Object as PropType<Array<any>>,
    default: () => ([]),
  },
})
const carouselConfig =  {
  wrapAround: true,
  ...props,
}
</script>