Components
Grouped content that is navigated horizontally.
Version: | 14.18.2 •View source•Changelog•Report issue | |
---|---|---|
Install: | yarn add @thumbtack/thumbprint-react | |
Import: | import { Carousel } from '@thumbtack/thumbprint-react'; |
The Carousel
component is a low-level controlled component. It displays multiple items in a row and animates when the selectedIndex
changes. It is infinite by default and the contents are draggable by touch devices.
children
The items in the carousel that appear horizontally.
React.ReactNode
selectedIndex
The index of the left-most item to display in the carousel. Supports all numbers.
number
onSelectedIndexChange
This function is called while a user is dragging the carousel and receives the new index.
This should update the selectedIndex
prop similarly to an onChange
in a controlled
input.
(newIndex: number) => void
visibleCount
The number of items that are visible at once.
number
1
spacing
The amount space separating each item. Supports CSS values such as 8px
or 0.5em
.
string
'0px'