Components

Carousel(React)

Grouped content that is navigated horizontally.

Version:10.1.1 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'