UICarousel

UICarousel

A slideshow component for cycling through elements.

<template>
  <UICarousel
    :showArrow="true"
    :autoPlay="true"
    direction="horizontal"
    dotPlacement="bottom"
    :itemsPerView="1"
    effect="slide"
    @onUpdatedIndex="handleIndexChange"
  >
    <template v-for="item in items" :key="item.id">
      <img :src="item.src" />
    </template>
  </UICarousel>
</template>

Props

• showArrow (boolean): Show navigation arrows
• autoPlay (boolean): Enable automatic sliding
• direction (‘horizontal’ | ‘vertical’): Slide direction
• dotPlacement (‘left’ | ‘right’ | ‘bottom’ | ‘top’): Dot indicator placement
• dotType (‘dot’ | ‘line’): Dot indicator style
• effect (‘slide’ | ‘fade’ | ‘card’ | ‘custom’): Transition effect
• itemsPerView (number): Number of items to show
• spaceBetweenItems (number): Space between items
• draggable (boolean): Enable drag navigation
• loop (boolean): Enable infinite loop
• centeredItems (boolean): Center items in container
• mousewheel (boolean): Enable mousewheel navigation
• showDots (boolean): Show dot indicators
• interval (number): Autoplay interval in milliseconds
• touchable (boolean): Enable touch navigation

Events

• onUpdatedIndex: Emitted when active slide changes