Components

Carousel(React)

Grouped content that is navigated horizontally.

Version:14.3.3 View sourceChangelogReport 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.

Props

  • children
    required

    The items in the carousel that appear horizontally.

    Type
    React.ReactNode
  • selectedIndex
    required

    The index of the left-most item to display in the carousel. Supports all numbers.

    Type
    number
  • onSelectedIndexChange
    required

    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.

    Type
    (newIndex: number) => void
  • visibleCount

    The number of items that are visible at once.

    Type
    number
    Default
    1
  • spacing

    The amount space separating each item. Supports CSS values such as 8px or 0.5em.

    Type
    string
    Default
    '0px'
Was this page helpful?

We use this feedback to improve the quality of our documentation.