Components
Carousel
Display a series of images or content in a compact design.
Usage
<template>
<NXW-Carousel v-model="1">
<NXW-CarouselItem v-for="item in items" :key="item.step" :step="item.step">
<div class="w-full h-full">
<img
:src="item.image"
class="w-full h-full object-cover"
loading="lazy"
width="100%"
height="100%"
:alt="item.alt"
/>
</div>
</NXW-CarouselItem>
</NXW-Carousel>
</template>
<script setup lang="ts">
const items = ref([
{
step: 1,
image: 'https://link.fantasyflip.de/s/f9PhRX',
alt: 'Image of a street in Vienna'
},
{
step: 2,
image: 'https://link.fantasyflip.de/s/t43DMr',
alt: 'Image of food in a plane at the plane window'
},
{
step: 3,
image: 'https://link.fantasyflip.de/s/GMqIyE',
alt: 'Image of the nature of Madeira'
},
{
step: 4,
image: 'https://link.fantasyflip.de/s/Q3Ze8X',
alt: 'Image of a subway station in Vienna'
}
])
</script>
Props
autoPlay
boolean
Default
true
disableAutoPlayOnHover
boolean
Default
true
hideNavigation
boolean
Default
false
hidePagination
boolean
Default
false
shadow
boolean
|
string
Default
shadow-xl
timeout
number
Default
5
transition
boolean
|
object
Default
{
"duration": "duration-300",
"delay": "delay-300",
"ease": "ease-in-out"
}
Slots
default
Used to set the NXW-CarouselItem components. The NXW-CarouselItem then can be filled with custom content.
The
NXW-CarouselItem components need to be direct children of the NXW-Carousel component.