Components

Carousel

Display a series of images or content in a compact design.

Usage

<template>
  <NXW-Carousel>
    <NXW-CarouselItem
      v-for="item in carouselItems"
      :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>

Props

auto-play

boolean
Default
true
Default
true
Default
false
Default
false

shadow

string
|
boolean
Default
shadow-xl

timeout

number
Default
5

transition

object
|
boolean
Default
<template>
  <NXW-Carousel
    :transition="{
      duration: 'duration-300',
      delay: 'delay-300',
      ease: 'ease-in-out',
    }"
  />
</template>

Slots


Copyright © 2024