Components

Carousel(React)

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';`

How the carousel works

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.

function CarouselDemo() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    function onSelectedIndexChange(newIndex) {
        setSelectedIndex(Math.round(newIndex));
    }

    return (
        <React.Fragment>
            <Carousel
                visibleCount={3}
                spacing="16px"
                selectedIndex={selectedIndex}
                onSelectedIndexChange={onSelectedIndexChange}
            >
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Personal Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>1. Personal Training</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Dog Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761411685384319/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>2. Dog Training</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Local Moving (under 50 miles)"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323760317171040266/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>3. Local Moving</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Massage Therapy"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761720722374783/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>4. Massage Therapy</ServiceCardTitle>
                </ServiceCard>
            </Carousel>

            <ButtonRow>
                <Button size="small" onClick={() => setSelectedIndex(selectedIndex - 1)}>
                    Prev
                </Button>
                <Button size="small" onClick={() => setSelectedIndex(selectedIndex + 1)}>
                    Next
                </Button>
            </ButtonRow>
        </React.Fragment>
    );
}

function CarouselDemo() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);
    function onSelectedIndexChange(newIndex) {
        setSelectedIndex(Math.round(newIndex));
    }
    return (
        <React.Fragment>
            <Carousel
                visibleCount={3}
                spacing="16px"
                selectedIndex={selectedIndex}
                onSelectedIndexChange={onSelectedIndexChange}
            >
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Personal Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>1. Personal Training</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Dog Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761411685384319/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>2. Dog Training</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Local Moving (under 50 miles)"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323760317171040266/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>3. Local Moving</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Massage Therapy"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761720722374783/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>4. Massage Therapy</ServiceCardTitle>
                </ServiceCard>
            </Carousel>
            <ButtonRow>
                <Button size="small" onClick={() => setSelectedIndex(selectedIndex - 1)}>
                    Prev
                </Button>
                <Button size="small" onClick={() => setSelectedIndex(selectedIndex + 1)}>
                    Next
                </Button>
            </ButtonRow>
        </React.Fragment>
    );
}

Props

Carousel

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'