Carousel

Usage

import { Carousel } from "@vesture/react";

function Example() {
  return (
    <Carousel autoPlay autoPlayInterval={4000}>
      <div style={{ padding: 40 }}>Slide one</div>
      <div style={{ padding: 40 }}>Slide two</div>
      <div style={{ padding: 40 }}>Slide three</div>
    </Carousel>
  );
}

Behavior

• Renders one slide at a time via a CSS transform, not multi-slide-per-view — each child of Carousel is one full slide.
• autoPlay pauses on hover or focus anywhere within the carousel and resumes on mouseleave/blur, so it never advances while a visitor is actively looking at it.
• prefers-reduced-motion disables autoPlay entirely (not just the slide transition's CSS animation) — continuous automatic content change is itself a motion-sensitivity concern.
• loop wraps at both boundaries when true; when false, the arrows disable at the first/last slide instead of wrapping.
• Left/Right arrow keys navigate whenever the carousel or one of its controls has focus, in addition to clicking an arrow or a dot.