Carousel

Slideshow with arrows, dots and a caption over each slide. The size prop (xs, sm, md, lg, xl) sets the slide height and caption size.

Jump to API reference

Import

Vue
import { UiCarousel } from '@ziyarago/ui/vue'

Autoplay (3.5 s, pauses on hover and focus)

Umrah Classic10 nights, Makkah and Madinah
Vue
<UiCarousel
  :autoplay="3500"
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights, Makkah and Madinah' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided city tour' }, { image: '/3d/plane.png', title: 'Direct flights', sub: 'Tashkent to Jeddah' }]"
 />

Controlled index

Madinah Ziyarat
Vue
<UiCarousel
  :index="1"
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat' }, { image: '/3d/plane.png', title: 'Direct flights' }]"
 />

Empty

Vue
<UiCarousel :items="[]" />

Featured tours

Umrah Classic10 nights, Makkah and Madinah
Vue
<UiCarousel
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights, Makkah and Madinah' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided city tour' }, { image: '/3d/plane.png', title: 'Direct flights', sub: 'Tashkent to Jeddah' }]"
 />

Sizes

Umrah Classic10 nights
Umrah Classic10 nights
Umrah Classic10 nights
Umrah Classic10 nights
Umrah Classic10 nights
Vue
<UiCarousel
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided tour' }]"
  size="xs"
 />

<UiCarousel
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided tour' }]"
  size="sm"
 />

<UiCarousel
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided tour' }]"
  size="md"
 />

<UiCarousel
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided tour' }]"
  size="lg"
 />

<UiCarousel
  :items="[{ image: '/3d/kaaba.png', title: 'Umrah Classic', sub: '10 nights' }, { image: '/3d/mosque.png', title: 'Madinah Ziyarat', sub: 'Guided tour' }]"
  size="xl"
 />

API reference

Slideshow of image slides with captions, arrows and dot pagination.

Props

PropType and valuesDefaultDescription
itemsrequired{ image?: string; title: string; sub?: string }[][]Slides. title and sub form the caption over the image.
indexnumber—Controlled active slide index. When set, the carousel only changes slide when you update it from onChange; when omitted it keeps its own state starting at 0.
autoplaynumber | boolean—Advance automatically every N milliseconds (true = 5000). Starts only in the browser, pauses while the pointer is over or focus is inside the carousel and while the tab is hidden, and is disabled for prefers-reduced-motion and data-motion="off". Needs at least 2 slides.
labelstring—Accessible name of the carousel region.
labels{ prev?: string; next?: string; slide?: string }'{ prev: 'Previous', next: 'Next', slide: 'Slide' }'Override the aria-labels of the arrows and dots.
sizexssmmdlgxl'md'Slide aspect ratio and caption size: xs 16/6, sm 16/7, md 16/8, lg 16/9, xl 16/10.

Events

Vue: @name. React: onName.

changeCalled with the new slide index on arrow, dot, keyboard (left and right arrows) and autoplay changes.

Notes

  • Arrows wrap around at both ends and are hidden with fewer than 2 slides; an empty items array renders an empty frame.
  • Autoplay has no visible pause button; hover or focus pauses it. Prefer a manual carousel for essential content.