<template>
  <Carousel 
    v-bind="carouselConfig"
    @slide-end="(i: number) => $emit('switch', i)"
  >
    <Slide v-for="(slide, index) in items" :key="index">
      <slot name="item" :index="index" :item="slide">
        <img :src="slide" style="width:100%; height:100%;" />
      </slot>
    </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>