Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

Carousel

A slide carousel with arrows, dots, autoplay, loop, and full W3C ARIA carousel pattern.

Preview

53 accessible components

Usage

import { Carousel } from "anexui";

<Carousel label="Featured projects">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</Carousel>
Copy code

AutoPlay

<Carousel autoPlay interval={3000} label="News carousel">
  <img src="/slide1.jpg" alt="Slide 1" />
  <img src="/slide2.jpg" alt="Slide 2" />
  <img src="/slide3.jpg" alt="Slide 3" />
</Carousel>
Copy code

Loop

<Carousel loop label="Product images">
  <Card>Product A</Card>
  <Card>Product B</Card>
  <Card>Product C</Card>
</Carousel>
Copy code

Hide arrows or dots

<Carousel showArrows={false} label="Testimonials">…</Carousel>
<Carousel showDots={false} label="Gallery">…</Carousel>
Copy code

Props

| Prop | Type | Default | Description | |---|---|---|---| | label | string | "Carousel" | aria-label for the carousel region | | autoPlay | boolean | false | Auto-advances slides | | interval | number | 4000 | Auto-advance interval in ms | | loop | boolean | false | Wraps from last back to first | | showArrows | boolean | true | Renders prev/next arrow buttons | | showDots | boolean | true | Renders dot navigation |

Accessibility