CarouselThe Carousel component allows users to navigate through a series of content in a linear way by swiping.

Overview

UsageCarousels are useful when you want users to focus on one item at a time, especially with large content sets. They can hint at more content and save space by showing items without cluttering the layout. It's best to arrange items so the most important ones appear first, making them easy for users to find.

Content Types

CardsCard widths can adjust based on their content, keeping at least an S7-sized "hint" of the next or previous item visible. All cards in a single carousel should have the same width, but widths can vary between carousels.

GalleryItem Width: Full width. Item Height: Adjusts dynamically based on the content. Spacing: No spacing between items. Counter: a counter can be displayed to indicate the current slide number and the total number of slides. Upon swiping, the counter remains in place.

Custom ContentYou can use the Carousel with custom content.The spacing between the items of the carousel can be customized.

Dev

PlaygroundCode Example

INFO

This component support modifiers.

TIP

This component extends the ScrollView props.

APIThis is the list of additional props for the component

allowAccessibleLayout

boolean

Whether to layout Carousel for accessibility

animated

boolean

Should the container be animated (send the animation style via containerStyle)

animatedScrollOffset

Animated.ValueXY

Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY())

autoplay

boolean

Enable to switch automatically between the pages. Default is false

autoplayInterval

number

Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled). Default is 4000

containerMarginHorizontal

number

Horizontal margin for the carousel container

containerPaddingVertical

number

Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android).

containerStyle

ViewStyle

The carousel container style

counterTextStyle

ViewStyle

The counter's text style

horizontal

boolean

Whether pages will be rendered horizontally or vertically. Default is true

initialPage

number

The initial page to start at. Default is 0

itemSpacings

number

The spacing between the pages

loop

boolean

If true, will have infinite scroll (works only for horizontal carousel)

onChangePage

(pageIndex, oldPageIndex, info) => void

Callback for page change event

onScroll

function

Attach a callback for onScroll event of the internal ScrollView

pageControlPosition

PageControlPosition

The position of the PageControl component ['over', 'under'], otherwise it won't display

pageControlProps

PageControlProps

PageControl component props

pageHeight

number

The page height (all pages should have the same height).

pageWidth

number

The page width (all pages should have the same width). Does not work if passing 'loop' prop

pagingEnabled

boolean

Will block multiple pages scroll (will not work with 'pageWidth' prop). Default is true

showCounter

boolean

Whether to show a page counter (will not work with 'pageWidth' prop)