Carousel

Slideshow for cycling through a series of content.

Usage

Simple Usage

preview

<template>
  <p-carousel>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
    </p-carousel-item>
  </p-carousel>
</template>

With Card Component

PrivyBalance

999999

E-materai Balance

999999

preview

<template>
  <p-carousel direction="vertical" height="5rem" >
    <p-carousel-item>
      <p-card
        element="div"
        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
        sectioned>
        <div class="grow">
          PrivyBalance
          <div class="text-lg font-bold text-info">
            999999
          </div>
        </div>
        <IconRight />
      </p-card>
    </p-carousel-item>
    <p-carousel-item>
      <p-card
        element="div"
        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
        sectioned>
        <div class="grow">
          E-materai Balance
          <div class="text-lg font-bold text-info">
            999999
          </div>
        </div>
        <IconRight />
      </p-card>
    </p-carousel-item>
  </p-carousel>
</template>

Vertical Mode

Set prop direction to vertical to enable Vertical Mode.

In Vertical Mode, the height must be set

preview

<template>
  <p-carousel direction="vertical" height="400px">
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
    </p-carousel-item>
  </p-carousel>
</template>

Progress Alignment

You can set position of progress indicator using prop align, start or end. default value is end.

PrivyBalance

999999

E-materai Balance

999999

PrivyBalance

999999

E-materai Balance

999999

preview

<template>
  <p-carousel direction="vertical" height="5rem" align="start" >
    <p-carousel-item>
      <p-card
        element="div"
        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
        sectioned>
        <div class="grow">
          PrivyBalance
          <div class="text-lg font-bold text-info">
            999999
          </div>
        </div>
        <IconRight />
      </p-card>
    </p-carousel-item>
    <p-carousel-item>
      <p-card
        element="div"
        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
        sectioned>
        <div class="grow">
          E-materai Balance
          <div class="text-lg font-bold text-info">
            999999
          </div>
        </div>
        <IconRight />
      </p-card>
    </p-carousel-item>
  </p-carousel>

  <p-carousel direction="vertical" height="5rem" align="end" >
    <p-carousel-item>
      <p-card
        element="div"
        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
        sectioned>
        <div class="grow">
          PrivyBalance
          <div class="text-lg font-bold text-info">
            999999
          </div>
        </div>
        <IconRight />
      </p-card>
    </p-carousel-item>
    <p-carousel-item>
      <p-card
        element="div"
        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
        sectioned>
        <div class="grow">
          E-materai Balance
          <div class="text-lg font-bold text-info">
            999999
          </div>
        </div>
        <IconRight />
      </p-card>
    </p-carousel-item>
  </p-carousel>
</template>

Loop Over

preview

<template>
  <p-carousel loop>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/5/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/6/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/7/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/8/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/9/600/400" />
    </p-carousel-item>
  </p-carousel>
</template>

Autoplay

preview

<template>
  <p-carousel loop autoplay autoplay-interval="3000">
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/59/600/400" />
    </p-carousel-item>
  </p-carousel>
</template>

Binding v-model

You can binding current active with v-model

preview

Active :

1

<template>
  <p-carousel v-model="active">
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
    </p-carousel-item>
    <p-carousel-item>
      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/59/600/400" />
    </p-carousel-item>
  </p-carousel>
</template>

API

Props

Props	Type	Default	Description
direction	String	horizontal	Carousel direction, valid values is horizontal, vertical
align	String	end	Carousel's progress indicator position, valid values is horizontal, vertical
width	String	100%	Carousel's width
height	String	-	Carousel's height, required if using direction vertical
loop	Boolean	false	Enable loop mode
autoplay	Boolean	false	Enable autoplay
autoplayInterval	Number	5000	Autoplay interval, in milliseconds
noProgress	Boolean	false	Hide progress indicator
splideOptions	Object	-	Override splide options, see here
modelValue	Number	1	v-model active value

Slots

Name	Description
default	Content to place in the <p-carousel-item>

Events

Name	Arguments	Description
change	Slide's index	Event slide changed