PubCarousel

This is a component for displaying a carousel of items. It provides a list of items and navigation controls to move between them.

Default carousel

<template>
  <div class="w-full">
    <pub-carousel :pictures="pictures" />
  </div>
</template>

<script lang="ts" setup>
import { PubCarousel } from 'vuelicity'

const pictures = [
    { src: '/images/img-1.svg', alt: 'Image 1' },
    { src: '/images/img-2.svg', alt: 'Image 2' },
    { src: '/images/img-3.svg', alt: 'Image 3' },
]
</script>

Carousel without controls

Prop - hideControls Usage

The hideControls prop can be used to hide the navigation controls.

<template>
  <div class="w-full">
    <pub-carousel
      :pictures="pictures"
      hide-controls
    />
  </div>
</template>

<script lang="ts" setup>
import { PubCarousel } from 'vuelicity'

const pictures = [
    { src: '/images/img-1.svg', alt: 'Image 1' },
    { src: '/images/img-2.svg', alt: 'Image 2' },
    { src: '/images/img-3.svg', alt: 'Image 3' },
]
</script>

Carousel without indicators

Prop - hideIndicators Usage

The hideIndicators prop can be used to hide the indicators.

<template>
  <div class="w-full">
    <pub-carousel
      :pictures="pictures"
      hide-indicators
    />
  </div>
</template>

<script lang="ts" setup>
import { PubCarousel } from 'vuelicity'

const pictures = [
    { src: '/images/img-1.svg', alt: 'Image 1' },
    { src: '/images/img-2.svg', alt: 'Image 2' },
    { src: '/images/img-3.svg', alt: 'Image 3' },
]
</script>

Carousel with slide animation

Prop - slide Usage

The slide prop can be used to enable slide animation.

<template>
  <div class="w-full">
    <pub-carousel
      :pictures="pictures"
      slide
    />
  </div>
</template>

<script lang="ts" setup>
import { PubCarousel } from 'vuelicity'

const pictures = [
    { src: '/images/img-1.svg', alt: 'Image 1' },
    { src: '/images/img-2.svg', alt: 'Image 2' },
    { src: '/images/img-3.svg', alt: 'Image 3' },
]
</script>

Carousel with slide and custom interval

Props - slide and interval Usage

The slide prop can be used to enable slide animation. The interval prop can be used to set the interval between slides.

Static carousel

Prop - isStatic Usage

The isStatic prop can be used to disable animation.

Reference

Properties

Name	Type	Default	Description	Options
hideControls	Boolean	false	Whether to hide the navigation controls.
hideIndicators	Boolean	false	Whether to hide the indicators.
slide	Boolean	false	Whether to enable slide animation.
interval	Number	3000	The interval between slides.
pictures	Array	[]	An array of picture items.
isStatic	Boolean	false	Whether to disable animation.