AnyCarousel — The Most Flexible Carousel for React

A highly customizable, smooth, and responsive carousel library designed to fit any use-case — from simple sliders to advanced UX animations.

Try In PlaygroundHow to use? View examples
GitHubNPM
image
image
image
image
x1
y1
x2
y2
cubic-bezier(0.79, 0.25, 0.5, 1)
tsx
<Carousel
    iconOptions={{
        icon: <ChevronIcon color="white" />,
        iconStyles: {
            backgroundColor: "black",
            color: "white",
        },
    }}
    scrollOffset={600}
    scrollEasing={`cubic-bezier(0.79, 0.25, 0.5, 1)`}
    scrollSnapType='center'
    duration={650}
>
    {largeImageList.map((item, i) => (
        <PlaygroundImageComponent key={i} imageUrl={item.imageUrl} />
    ))}
</Carousel>

Carousel in action

Live patterns you can copy—auto-play, callbacks, navigation styling, scroll distance, and motion tuning.

Testimonials with auto-advance

Uses autoSlideInterval with a relaxed duration. Clicking the previous or next control stops auto-play so visitors can read at their own pace.

“Shipped our marketing carousel in an afternoon. The easing hooks are exactly what we needed.”

Engineering lead

B2B SaaS

“Native scroll means mobile feels right—no fighting fake swipe physics.”

Product designer

Commerce

“We wired onSlideChange to analytics in minutes.”

Growth engineer

Marketplace

“Auto-advance for hero promos, arrows for users who want control.”

Frontend dev

Media

Active slide with onSlideChange

Track the most visible slide and mirror it in UI—here, simple dots. Useful for progress, analytics, or synced captions.

Product

Atlas

Product

Nova

Product

Pulse

Product

Vertex

Product

Aurora

Custom navigation icons

iconOptions accepts your own icon node and styles so the controls match your brand.

1
2
3
4
5

Scroll distance: card-sized steps vs wide jumps

scrollOffset controls how far programmatic moves go (arrows and auto-slide). Match it to your slide width for one-card steps, or use a larger value to cross multiple items.

scrollOffset ≈ slide + gap

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Larger scrollOffset

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Long, eased transitions

Combine duration with scrollEasing for editorial, slow-gliding motion—handy for hero rows and large imagery.

Slide 1

Custom easing curves

Slide 2

Configurable duration

Slide 3

Optional auto-slide

Slide 4

onSlideChange callback

Light theme on a light surface

theme="light" is meant for bright backdrops. Slides use dark text so contrast stays readable.

Docs
API
Examples
GitHub

Features

Here are some of the features that make AnyCarousel the best carousel library for React.

icon

Highly Customizable

Control animations, curves, layouts, transitions, and more.

icon

Easy to Integrate

Install, configure, and drop into your app with minimal setup.

icon

Fast & Lightweight

Built for performance — optimized rendering and motion.

Installation

npm

npm install react-any-carousel

yarn

yarn add react-any-carousel

pnpm

pnpm add react-any-carousel