Carousel

<View padding={2} maxWidth="100%">
  <Carousel visibleItems={3}>
    <AspectRatio ratio={16 / 9}>
      <Placeholder w="100%" h={120} />
    </AspectRatio>
    <AspectRatio ratio={16 / 9}>
      <Placeholder w="100%" h={120} />
    </AspectRatio>
    <AspectRatio ratio={16 / 9}>
      <Placeholder w="100%" h={120} />
    </AspectRatio>
    <AspectRatio ratio={16 / 9}>
      <Placeholder w="100%" h={120} />
    </AspectRatio>
    <AspectRatio ratio={16 / 9}>
      <Placeholder w="100%" h={120} />
    </AspectRatio>
  </Carousel>
</View>

Carousel displays its children as carousel items which can be scrolled.

You can control how many items should be visible in the scrollable area at the same time with the visibleItems property. If it's not passed, width of the items will be defined by the width of the passed children. It means you can either pass a single number or an object with numbers based on the viewport names:

<Carousel visibleItems={{ s: 2, l: 3 }}>
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
</Carousel>

You can control the spacing between the items with gap property, which defines the multiplier of the base unit token value. This way you can align items in the Carousel with your product grid.

This property supports responsive syntax, which means you can either pass a single number or an object with numbers based on the viewport names:

<Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
</Carousel>

In case you're on mobile viewport or just want to make the carousel take the full-width of the parent component, you can use bleed property. It will apply negative margin to the carousel while keeping the items aligned with the rest of the content. Since this property supports responsive syntax, you can apply bleed only for mobile screens and pick the value of your page padding.

<Carousel visibleItems={3} gap={4} bleed={{ s: 4, l: 0 }}>
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
  <Placeholder h={100} />
</Carousel>

Carousel provides access to its navigateBack and navigateForward methods through an instanceRef property. If you create a React ref and pass it to Carousel, you will be able to navigate the Carousel imperatively.

For example, you will be able to scroll Carousel with a time interval or control it with buttons rendered ouside of the component. In this case, it could be also useful to use the navigationDisplay property hidden value, to hide the original navigation controls.

function RefDemo() {
  const carouselRef = React.useRef();

  return (
    <View gap={3}>
      <View direction="row" gap={4} align="center">
        <View.Item grow>
          <Text variant="title-3">Carousel title</Text>
        </View.Item>
        <Button onClick={() => carouselRef.current.navigateBack()}>Back</Button>
        <Button onClick={() => carouselRef.current.navigateForward()}>
          Forward
        </Button>
      </View>
      <Carousel
        visibleItems={3}
        instanceRef={carouselRef}
        navigationDisplay="hidden"
      >
        <Placeholder h={100} />
        <Placeholder h={100} />
        <Placeholder h={100} />
        <Placeholder h={100} />
        <Placeholder h={100} />
        <Placeholder h={100} />
      </Carousel>
    </View>
  );
}