PXD

Carousel

Loop a series of images or texts in a limited space.

Default

Slides are declared with the options prop; the item slot provides their content. Without it each slide renders its label.

Slide 1
Slide 2
Slide 3
Slide 4
<script setup>
import { ref } from 'vue'

const slides = [
  { value: 1, label: 'Slide 1' },
  { value: 2, label: 'Slide 2' },
  { value: 3, label: 'Slide 3' },
  { value: 4, label: 'Slide 4' },
]

const direction = ref('horizontal')
const indicatorType = ref('dot')
const indicatorPosition = ref('center')
</script>

<template>
  <PStack direction="vertical">
    <PSwitch v-model="direction">
      <PSwitchItem label="horizontal" value="horizontal" />
      <PSwitchItem label="vertical" value="vertical" />
    </PSwitch>

    <PSwitch v-model="indicatorType">
      <PSwitchItem label="dot" value="dot" />
      <PSwitchItem label="line" value="line" />
      <PSwitchItem label="custom" value="custom" />
    </PSwitch>

    <PSwitch v-model="indicatorPosition">
      <PSwitchItem label="center" value="center" />
      <PSwitchItem label="top" value="top" />
      <PSwitchItem label="bottom" value="bottom" />
      <PSwitchItem label="left" value="left" />
      <PSwitchItem label="right" value="right" />
    </PSwitch>

    <PCarousel
      :options="slides"
      :direction="direction"
      :indicator-type="indicatorType"
      :indicator-position="indicatorPosition"
    >
      <template #item="{ item }">
        <div class="flex items-center justify-center h-full bg-gray-200 nth-[2n]:bg-gray-300">
          {{ item.label }}
        </div>
      </template>

      <template v-if="indicatorType === 'custom'" #indicator="{ total, current }">
        <span
          class="flex items-center text-xs font-mono py-0.5 px-1.5 rounded-full bg-gray-100"
        >
          {{ current + 1 }}/{{ total }}
        </span>
      </template>
    </PCarousel>
  </PStack>
</template>

Wheel toggle

Use the mouse wheel to switch (if loop=true is set, it may cause the cursor to be placed on the carousel and the page cannot be scrolled).

Slide 1
Slide 2
Slide 3
Slide 4
<script setup>
const slides = [{ value: 1, label: 'Slide 1' }, { value: 2, label: 'Slide 2' }, { value: 3, label: 'Slide 3' }, { value: 4, label: 'Slide 4' }]
</script>

<template>
  <PCarousel toggle-on-wheel :options="slides">
    <template #item="{ item }">
      <div class="flex items-center justify-center h-full bg-gray-200 nth-[2n]:bg-gray-300">
        {{ item.label }}
      </div>
    </template>
  </PCarousel>
</template>

Disable indicator and arrow

Slide 1
Slide 2
Slide 3
Slide 4
<script setup>
const slides = [{ value: 1, label: 'Slide 1' }, { value: 2, label: 'Slide 2' }, { value: 3, label: 'Slide 3' }, { value: 4, label: 'Slide 4' }]
</script>

<template>
  <PCarousel :indicator="false" :arrow="false" :options="slides">
    <template #item="{ item }">
      <div class="flex items-center justify-center h-full bg-gray-200 nth-[2n]:bg-gray-300">
        {{ item.label }}
      </div>
    </template>
  </PCarousel>
</template>

Disable autoplay and loop

Slide 1
Slide 2
Slide 3
Slide 4
<script setup>
const slides = [{ value: 1, label: 'Slide 1' }, { value: 2, label: 'Slide 2' }, { value: 3, label: 'Slide 3' }, { value: 4, label: 'Slide 4' }]
</script>

<template>
  <PCarousel :autoplay="false" :loop="false" :options="slides">
    <template #item="{ item }">
      <div class="flex items-center justify-center h-full bg-gray-200 nth-[2n]:bg-gray-300">
        {{ item.label }}
      </div>
    </template>
  </PCarousel>
</template>

Disable pause on hover

By default, it will pause when the mouse is over the carousel.

Slide 1
Slide 2
Slide 3
Slide 4
<script setup>
const slides = [{ value: 1, label: 'Slide 1' }, { value: 2, label: 'Slide 2' }, { value: 3, label: 'Slide 3' }, { value: 4, label: 'Slide 4' }]
</script>

<template>
  <PCarousel :pause-on-hover="false" :options="slides">
    <template #item="{ item }">
      <div class="flex items-center justify-center h-full bg-gray-200 nth-[2n]:bg-gray-300">
        {{ item.label }}
      </div>
    </template>
  </PCarousel>
</template>

Props

NameTypeDefaultDescription
optionsCarouselOption[][]Slides to loop over; label is rendered when no item slot is given
indexnumber0Index of the initially displayed item
loopbooleantrueWrap around when reaching either end
arrowbooleantrueShow the previous and next arrows
heightnumber | string180Height of the viewport; numbers are treated as px
autoplaybooleantrueAdvance to the next item automatically
intervalnumber3000Delay between autoplay transitions, in milliseconds
indicatorbooleantrueShow the indicator dots or lines
direction'horizontal' | 'vertical'horizontalAxis along which the items slide and swipe
indicator-type'dot' | 'line'dotIndicator appearance
indicator-positionBasePosition | 'center'centerPlacement of the indicator relative to the viewport
pause-on-hoverbooleantrueSuspend autoplay while the pointer is over the carousel
toggle-on-wheelboolean-Switch items on mouse wheel instead of scrolling the page

Events

NameTypeDescription
change(index: number) => voidEmitted after the carousel has moved to another slide.

Slots

NameDescription
itemContent of one slide, receives { item, index }
indicatorIndicator content, receives { current, total }

Source

Source