@usevyre/react @usevyre/vue

Carousel

An accessible content slider for galleries, onboarding, and testimonials. Controlled by a 0-based index; compose CarouselSlide children. Snap scrolling, clickable dots, prev/next arrows, ←/→ keyboard, optional loop and autoPlay (which pauses on hover/focus).

Gallery with loop

Drag/scroll, click a dot, use the arrows, or focus the track and press ←/→. With loop, the ends wrap.

Welcome

Build AI-friendly UIs.

Slide 1 of 3

import { useState } from "react";
import { Carousel, CarouselSlide } from "@usevyre/react";

const [i, setI] = useState(0);

<Carousel value={i} onChange={setI} loop>
  <CarouselSlide>
    <img src="/welcome.jpg" alt="Welcome" />
  </CarouselSlide>
  <CarouselSlide>
    <img src="/compose.jpg" alt="Compose" />
  </CarouselSlide>
  <CarouselSlide>
    <img src="/ship.jpg" alt="Ship" />
  </CarouselSlide>
</Carousel>

<script setup>
import { ref } from "vue";
import { Carousel, CarouselSlide } from "@usevyre/vue";

const i = ref(0);
</script>
<template>
  <Carousel v-model="i" loop>
    <CarouselSlide>
      <img src="/welcome.jpg" alt="Welcome" />
    </CarouselSlide>
    <CarouselSlide>
      <img src="/compose.jpg" alt="Compose" />
    </CarouselSlide>
    <CarouselSlide>
      <img src="/ship.jpg" alt="Ship" />
    </CarouselSlide>
  </Carousel>
</template>

Props

Prop	Type	Default	Description
`value`	`number`	`—`	Controlled active slide (0-based). Omit for uncontrolled.
`defaultValue`	`number`	`0`	Initial slide when uncontrolled.
`onChange`	`(index: number) => void`	`—`	Emits the new slide index. Not an event.
`loop`	`boolean`	`false`	Wrap past the first/last slide.
`autoPlay`	`boolean`	`false`	Advance automatically; pauses on hover/focus.
`interval`	`number`	`5000`	Autoplay interval in ms.
`showArrows`	`boolean`	`true`	Show prev/next arrow buttons.
`showIndicators`	`boolean`	`true`	Show clickable dot indicators.

Slides must be CarouselSlide. Snap, indices, and ARIA roles depend on it — so AI can’t produce a broken slider from raw divs.

AI Context

Valid props

Prop	Values	Default
`loop`	`true`\|`false`	`false`
`autoPlay`	`true`\|`false`	`false`
`showArrows`	`true`\|`false`	`true`
`showIndicators`	`true`\|`false`	`true`

Common AI mistakes

onChange={(e) => set(e.target.value)}→ onChange={(index) => setIndex(index)}
Putting raw elements directly in Carousel→ Wrap each slide in <CarouselSlide>
Building a slider with manual scroll + dot state→ Use <Carousel> with CarouselSlide children
autoPlay without considering reduced motion / pausing→ Carousel already pauses on hover/focus; keep interval reasonable or omit autoPlay

Quick examples

Image gallery with loop

const [i, setI] = useState(0);

<Carousel value={i} onChange={setI} loop>
  <CarouselSlide><img src="/a.jpg" alt="A" /></CarouselSlide>
  <CarouselSlide><img src="/b.jpg" alt="B" /></CarouselSlide>
  <CarouselSlide><img src="/c.jpg" alt="C" /></CarouselSlide>
</Carousel>

Onboarding, autoplay, no arrows

<Carousel autoPlay interval={4000} showArrows={false}>
  <CarouselSlide><Welcome /></CarouselSlide>
  <CarouselSlide><Features /></CarouselSlide>
  <CarouselSlide><GetStarted /></CarouselSlide>
</Carousel>

← Card Checkbox →