120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { Splide } from '@splidejs/vue-splide'
|
|
import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
|
|
import type { SlideItemSize } from '#layers/types/components/slide'
|
|
|
|
interface Props {
|
|
slideItemSize: SlideItemSize
|
|
autoplay?: boolean | string
|
|
arrows?: boolean
|
|
pagination?: boolean
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
autoplay: false,
|
|
arrows: true,
|
|
pagination: true,
|
|
})
|
|
|
|
const options = computed((): ResponsiveOptions => {
|
|
return {
|
|
type: 'loop',
|
|
focus: 'center',
|
|
autoWidth: true,
|
|
autoHeight: true,
|
|
speed: 400,
|
|
updateOnMove: true,
|
|
arrows: props.arrows,
|
|
pagination: props.pagination,
|
|
autoplay: props.autoplay,
|
|
classes: {
|
|
arrows: 'splide-arrows',
|
|
arrow: 'splide-arrow',
|
|
prev: 'arrow-prev',
|
|
next: 'arrow-next',
|
|
pagination: 'splide-pagination-bullets',
|
|
page: 'splide-pagination-bullet',
|
|
},
|
|
}
|
|
})
|
|
|
|
const style = computed(() => {
|
|
if (!props.slideItemSize) return {}
|
|
|
|
const { mo, pc } = props.slideItemSize
|
|
const scaleFactor = 1.1429
|
|
|
|
return {
|
|
// 모바일 기본값
|
|
'--banner-width-mo': `${mo.width}px`,
|
|
'--banner-height-mo': `${mo.height}px`,
|
|
'--banner-gap-mo': `${mo.gap}px`,
|
|
// 모바일 확대값
|
|
'--banner-width-mo-active': `${mo.width * scaleFactor}px`,
|
|
'--banner-height-mo-active': `${mo.height * scaleFactor}px`,
|
|
'--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,
|
|
|
|
// PC 기본값
|
|
'--banner-width-pc': `${pc.width}px`,
|
|
'--banner-height-pc': `${pc.height}px`,
|
|
'--banner-gap-pc': `${pc.gap}px`,
|
|
// PC 확대값
|
|
'--banner-width-pc-active': `${pc.width * scaleFactor}px`,
|
|
'--banner-height-pc-active': `${pc.height * scaleFactor}px`,
|
|
'--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
|
|
// PC arrow값
|
|
'--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
|
|
}
|
|
})
|
|
|
|
const handleSplideMounted = (splide: SplideType) => {
|
|
splide.refresh()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="`center-highlight ${props.class || ''}`" :style="style">
|
|
<Splide :options="options" @splide:mounted="handleSplideMounted">
|
|
<slot />
|
|
</Splide>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.center-highlight {
|
|
@apply w-full;
|
|
}
|
|
.center-highlight:deep(.splide__slide) {
|
|
@apply flex items-center justify-center;
|
|
width: var(--banner-width-mo);
|
|
height: var(--banner-height-mo-active);
|
|
margin-right: var(--banner-gap-mo);
|
|
}
|
|
.center-highlight:deep(.splide__slide.is-active) {
|
|
width: var(--banner-width-mo-container);
|
|
}
|
|
|
|
/* PC 스타일 */
|
|
@media (min-width: 1024px) {
|
|
.center-highlight:deep(.splide__slide) {
|
|
width: var(--banner-width-pc);
|
|
height: var(--banner-height-pc-active);
|
|
margin-right: var(--banner-gap-pc);
|
|
}
|
|
.center-highlight:deep(.splide__slide.is-active) {
|
|
width: var(--banner-width-pc-container);
|
|
}
|
|
.center-highlight:deep(.splide-arrow) {
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.center-highlight:deep(.arrow-prev) {
|
|
margin-left: calc(-1 * var(--banner-arrow-pc));
|
|
}
|
|
.center-highlight:deep(.arrow-next) {
|
|
margin-left: var(--banner-arrow-pc);
|
|
}
|
|
}
|
|
</style>
|