REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Data Display

Carousel

A swipeable content carousel with navigation controls and indicator dots.

Example

Preview

Code

Props

Carousel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the carousel container.

defaultIndex

number

0

The initial slide index to display.

loop

boolean

false

Enable infinite looping. Seamlessly wraps from last to first and vice versa.

itemWidth

number

—

Fixed width for each item. When set, multiple items are visible at once.

gap

number

0

Gap in pixels between carousel items.

autoPlay

boolean

false

Automatically advance slides on an interval.

autoPlayInterval

number

3000

Interval in milliseconds between auto-advances.

onIndexChange

(index: number) => void

—

Callback fired when the active slide changes.

CarouselContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the scrollable content area.

CarouselItem Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for an individual carousel slide.

CarouselPrevious Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the previous navigation button.

CarouselNext Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the next navigation button.

CarouselDots Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the dot indicators.

Usage Guidelines

When to use

Use Carousel to showcase multiple pieces of content in a horizontally swipeable container.

Best practices

•

Provide CarouselPrevious and CarouselNext buttons for non-touch users.

•

Use CarouselDots to indicate the total number of slides and current position.

•

Keep the number of carousel items manageable — consider pagination for large sets.

Accessibility

Carousel items are navigable via swipe gestures and button controls. Announce slide changes to screen readers with live region updates.

Related Components

Tabs

A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.

Pagination

Navigation controls for paging through content.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License