A headless, accessible, tree-shakeable React carousel
compound-component API · keyboard · swipe · autoplay · ARIA · ready-made presets

📖 Documentation & Live demos · npm · Report a bug

---

📦 Installation

npm install react-carousel-latest

Import the base stylesheet once at your app root (and presets.css if you use a preset):

import "react-carousel-latest/styles.css";
import "react-carousel-latest/presets.css";

---

🚀 Quick start

A full-bleed image carousel with the staggered slice transition:

import { SlicerSlider } from "react-carousel-latest/presets";
import "react-carousel-latest/styles.css";
import "react-carousel-latest/presets.css";

const slides = [
  { src: "/photos/01.jpg", caption: "Slide 1" },
  { src: "/photos/02.jpg", caption: "Slide 2" },
  { src: "/photos/03.jpg", caption: "Slide 3" },
];

export default function App() {
  return <SlicerSlider slides={slides} loop autoplay slices={6} height={460} />;
}

Building something custom? The headless <Carousel> primitives, the other presets, theming, and the complete prop reference live in the documentation — with copy-paste code for every example.

---

✨ Features

• Headless core — all logic in a useCarousel hook; bring your own markup.
• Compound components — Carousel.Track / Slide / Button / Dots / PlayPause.
• Ready-made presets — CardSlider, ImageSlider, and SlicerSlider.
• Interactions — keyboard (arrows / Home / End), touch & pointer swipe, and autoplay that pauses on hover/focus and respects prefers-reduced-motion.
• Accessible — region/slide roles, aria-live, labelled controls.
• No CSS framework required — bundled, themeable CSS. No Tailwind.
• Dual ESM + CJS, full TypeScript types, sideEffects: false.

---

🧩 What's in the box

Export	What it is
Carousel + useCarousel	Headless compound primitives — compose your own UI.
CardSlider	Decorated card row with six design variants.
ImageSlider	Full-bleed image carousel with caption + overlaid controls.
SlicerSlider	Staggered horizontal-slice wipe transition.

Checkout Full API, theming, accessibility notes, and live demos: https://react-carousel-latest.vercel.app/

---

🤝 Contributing

Contributions are welcome! Please read the Contributing guide and our Code of Conduct. For bugs and ideas, use the issue templates.

🔒 Security

Found a vulnerability? Please follow the Security policy — don't open a public issue.

📝 Changelog

See CHANGELOG.md for release notes.

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.