<template>
  <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" circular>
    <!-- 视频项 -->
    <swiper-item v-if="video">
      <video class="banner-swiper__video" :src="video" controls />
    </swiper-item>
    <!-- 图片项 -->
    <swiper-item v-for="(img, idx) in images" :key="idx">
      <image class="banner-swiper__image" :src="img" mode="aspectFill" />
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
defineProps<{
  images: string[]
  video?: string
}>()
</script>

<style scoped>
.banner-swiper {
  width: 100%;
  height: 600rpx;
}
.banner-swiper__image {
  width: 100%;
  height: 600rpx;
}
.banner-swiper__video {
  width: 100%;
  height: 600rpx;
}
</style>
