Carousel

Slideshow for cycling through a series of content.

Usage

Simple Usage

preview

vue

<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

vue

<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="flex-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="flex-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.

preview

vue

<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

vue

<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="flex-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="flex-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="flex-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="flex-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

vue

<template>
  <p-carousel loop>
    <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="300" height="100" src="https://picsum.photos/id/6/300/100" />
    </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

vue

<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 :

vue

<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

Carousel ​

Usage ​

Simple Usage ​

With Card Component ​

Vertical Mode ​

Progress Alignment ​

Loop Over ​

Autoplay ​

Binding v-model ​

API ​

Props ​

Slots ​

Events ​

Carousel

Usage

Simple Usage

With Card Component

Vertical Mode

Progress Alignment

Loop Over

Autoplay

Binding v-model

API

Props

Slots

Events