Carousel

bo-carousel presents a sequence of named item-N slots with previous/next controls and a controlled active index. Use it for related content, not for critical navigation or content that users must compare at once.

Basic usage

Project overview

Team activity

Release notes

Slide 1 of 3

<bo-carousel v-model="slide">
  <template #item-0>First slide</template>
  <template #item-1>Second slide</template>
  <template #item-2>Third slide</template>
</bo-carousel>

Faster builds

New integrations

<bo-carousel v-model="compactSlide" loop aria-label="Release highlights">
  <template #item-0>Faster builds</template>
  <template #item-1>New integrations</template>
</bo-carousel>

Rich slide content

Slides can contain cards, images, and actions. Keep each slide's heading unique and include a visible description. If controls are supplied through slots, use real buttons with accessible names.

<bo-carousel v-model="slide" aria-label="Release highlights">
  <template #item-0><article><h3>Faster builds</h3><p>...</p><bo-button>Read more</bo-button></article></template>
  <template #item-1><article><h3>New integrations</h3><p>...</p></article></template>
</bo-carousel>

States and behavior

• v-model identifies the active zero-based slide and can be updated by external controls.
• Disable or hide navigation when there is no previous/next item.
• Avoid autoplay for essential content. If autoplay is added, pause on hover/focus and provide a pause control.
• Keep slide height stable to prevent layout shift.

Accessibility and responsive guidance

Provide aria-label when the carousel context is not obvious. Ensure previous/next controls have text or an aria-label, preserve visible focus, and support arrow-key navigation. Use one slide on narrow screens; let slide content use w-full and cap the container rather than forcing a fixed width.

API reference

Prop	Type	Default	Description
modelValue	number	0	Active slide index (v-model).
id	string	Generated	Root element id.
ariaLabel	string	Carousel	Accessible name.
loop	boolean	false	Wrap from the final slide to the first.
orientation	'horizontal' | 'vertical'	'horizontal'	Navigation axis.

Slots and methods

Slot/API	Description
item-N	Content for slide N.
previous()	Move to the previous slide.
next()	Move to the next slide.
goTo(index)	Move to a specific slide.