React Responsive Carousel

React Responsive Carousel is a React component for building sliders and carousels that support touch/swipe gestures, mouse-emulated touch, keyboard navigation, and auto-play, while remaining responsive across screen sizes. Each direct child of the <Carousel> component becomes a slide, so it can render images, videos, or arbitrary content without a specialized slide API.

The component is highly customizable via render props for arrows, indicators, thumbnails, and status text, and supports both horizontal and vertical axes, infinite looping, and server-side rendering. The maintainer has noted limited time for active development, so the project receives community-submitted pull requests rather than a steady release cadence, but it remains a widely used, stable carousel implementation for React.

What You Get

• A <Carousel> component where every direct child becomes a slide (images, video, or any content)
• Touch/swipe support plus mouse-emulated touch (emulateTouch) for non-touch devices
• Keyboard navigation, autoplay with configurable interval, and infinite loop
• Horizontal or vertical axis support and dynamic height slides
• Render props for custom arrows, indicators, thumbnails, and status display
• Server-side rendering compatibility

Common Use Cases

• Image galleries and product photo carousels on e-commerce or marketing pages
• Onboarding/tutorial slide decks within a React app
• Testimonial or content sliders with autoplay
• Mobile-friendly swipeable content viewers where touch gestures matter

Under The Hood

Architecture - The core lives in src/components/, with main.tsx mounting a top-level Carousel class component that manages selectedItem state, touch/mouse event handlers, and autoplay timers, delegating rendering of arrows/indicators/thumbs/status to internal sub-components (each overridable via a matching render* prop). src/CSSTranslate.ts and src/dimensions.ts compute the transform offsets and slide widths used to physically translate the slide track, and src/cssClasses.ts centralizes BEM-style class naming shared with the SCSS in src/carousel.scss/main.scss. Tech Stack - Authored in TypeScript with SCSS for styling (compiled to the shipped carousel.min.css), Babel (babel.config.json) for the build, and Jest (setupTests.js, src/__tests__) for testing; the published lib/ output ships both JS and compiled type declarations. Code Quality - src/__tests__ contains a substantial Jest test suite covering component rendering and interaction behavior; the maintainer has explicitly noted limited bandwidth for active maintenance, so quality is upheld mainly through community-reviewed pull requests rather than a steady release cadence, and there is no CI badge currently indicating passing status. API Design - The children-as-slides model (<Carousel><div>...</div>...</Carousel>) removes the need for a special slide-item API, and the extensive render-prop surface (documented in a large props table in the README) gives fine-grained UI customization at the cost of a larger API surface to learn than a minimal carousel component would have.