Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
44 lines
977 B
Vue
44 lines
977 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
images: string[]
|
|
mode?: 'slide' | 'fade'
|
|
delay?: number // time in ms between transitions
|
|
duration?: number // how long a transition takes, nonphysical integer
|
|
}>()
|
|
|
|
const classes = useStyling(
|
|
'imageSimpleSlider',
|
|
{
|
|
slots: {
|
|
base: 'w-full h-full [&>*]:w-full [&>*]:h-full',
|
|
image: 'z-10 w-full h-full object-cover',
|
|
overlay: 'absolute z-25 inset-0',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<UCarousel
|
|
:class="classes.base"
|
|
:items="props.images"
|
|
v-slot="{ item }"
|
|
:ui="{
|
|
container: 'h-full flex',
|
|
item: 'w-full h-full ps-0',
|
|
}"
|
|
loop
|
|
:autoplay="{ delay: props.delay }"
|
|
:fade="props.mode === 'fade'"
|
|
:duration="props.duration"
|
|
>
|
|
<div class="isolate relative w-full h-full">
|
|
<NuxtImg :class="classes.image" :src="item" />
|
|
<div :class="classes.overlay" />
|
|
</div>
|
|
</UCarousel>
|
|
</template>
|