53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { Splide } from '@splidejs/vue-splide'
|
|
import type { ResponsiveOptions } from '@splidejs/splide'
|
|
|
|
interface Props {
|
|
autoplay?: boolean | string
|
|
arrows?: boolean
|
|
pagination?: boolean
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
autoplay: false,
|
|
arrows: true,
|
|
pagination: true,
|
|
})
|
|
|
|
// 페이드 슬라이드 옵션
|
|
const fadeOptions = computed((): ResponsiveOptions => {
|
|
return {
|
|
type: 'fade',
|
|
rewind: true,
|
|
perPage: 1,
|
|
perMove: 1,
|
|
speed: 600,
|
|
updateOnMove: true,
|
|
autoplay: props.autoplay,
|
|
arrows: props.arrows,
|
|
pagination: props.pagination,
|
|
classes: {
|
|
arrows: 'splide-arrows type-full',
|
|
arrow: 'splide-arrow',
|
|
prev: 'arrow-prev',
|
|
next: 'arrow-next',
|
|
pagination: 'splide-pagination-bullets type-full',
|
|
page: 'splide-pagination-bullet',
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Splide :options="fadeOptions" class="h-full">
|
|
<slot />
|
|
</Splide>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.splide:deep(.splide__track) {
|
|
@apply h-full;
|
|
}
|
|
</style>
|