mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-17 23:19:55 +08:00
31 lines
663 B
Vue
31 lines
663 B
Vue
<template>
|
|
<div class="img-slider">
|
|
<Carousel :autoplay="2000" :wrap-around="true">
|
|
<Slide v-for="{ src, alt } of imgSliderList" :key="src">
|
|
<img class="carousel__item" :src="src" :alt="alt" />
|
|
</Slide>
|
|
</Carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType } from 'vue'
|
|
import type { ImgSliderList } from '../types'
|
|
|
|
import 'vue3-carousel/dist/carousel.css'
|
|
import { Carousel, Slide } from 'vue3-carousel'
|
|
|
|
defineProps({
|
|
imgSliderList: {
|
|
type: Object as PropType<ImgSliderList>,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.carousel__item {
|
|
width: 90%;
|
|
}
|
|
</style>
|