How can I make this into a working Carousel? The carousel pops up but the two arrows are not active

Question

How can I make this into a working carousel that shows 3 or more cards at the same Carousel spin? Here is an example code that I've put together and had trouble showing more multiple cards on different spins. My goal is to be able to show multiple cards on every spring (out of total of four spins) of the Carousel.

import React, { Component } from "react";
import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Box,
  Image,
  Grid,
  Heading,
  Carousel,
  Grommet
} from "grommet";
export class Events extends Component {
  render() {
    const customTheme = {
      carousel: { row: { count: 1 }, column: { count: 3 } }
    };
    return (
      <Box fill="vertical">
        <Box align="center">
          <Heading textAlign="center">Upcoming Events</Heading>
          <Grommet theme={customTheme}>
            <Carousel>
              <Grid
                columns={{ count: 3, size: "auto" }}
                rows={{ count: 1, size: "medium" }}
                gap="medium"
                pad="small"
              >
                <Box
                  pad="medium"
                  align="center"
                  background={{ color: "white", opacity: "strong" }}
                  round
                  gap="small"
                  fill="vertical"
                >
                  <Card pad="large" background="dark-1" gap="medium">
                    <CardHeader>
                      <Box height="small" width="small">
                        <Image src="./images/Photo.jpg" />
                      </Box>{" "}
                    </CardHeader>
                    <CardBody pad="small">
                      The Stranahan High School Graduation
                    </CardBody>{" "}
                    <CardFooter>Footer</CardFooter>{" "}
                  </Card>{" "}
                </Box>
                <Box
                  pad="medium"
                  align="center"
                  background={{ color: "white", opacity: "strong" }}
                  round
                  gap="small"
                  fill="vertical"
                >
                  <Card pad="large" background="dark-1" gap="medium">
                    <CardHeader>
                      {" "}
                      <Box height="small" width="small">
                        {" "}
                        <Image src="./images/Photo.jpg" />{" "}
                      </Box>{" "}
                    </CardHeader>{" "}
                    <CardBody pad="small">
                      The Stranahan High School Graduation
                    </CardBody>
                    <CardFooter>Footer</CardFooter>{" "}
                  </Card>{" "}
                </Box>
                <Box
                  pad="medium"
                  align="center"
                  background={{ color: "white", opacity: "strong" }}
                  round
                  gap="small"
                  fill="vertical"
                >
                  <Card pad="large" background="dark-1" gap="medium">
                    <CardHeader>
                      {" "}
                      <Box height="small" width="small">
                        <Image src="./images/Photo.jpg" />{" "}
                      </Box>
                    </CardHeader>
                    <CardBody pad="small">
                      The Stranahan High School Graduation
                    </CardBody>
                    <CardFooter>Footer</CardFooter>{" "}
                  </Card>{" "}
                </Box>
                <Box
                  class="Cards"
                  flex={false}
                  direction="row"
                  justify="between"
                  pad={{ left: "small", right: "small", top: "xsmall" }}
                >
                  {" "}
                </Box>{" "}
              </Grid>{" "}
            </Carousel>{" "}
          </Grommet>{" "}
        </Box>{" "}
      </Box>
    );
  }
}
export default Events;

Answer 1

I've fixed the example for you, the number of Cards displayed for each Carousel switch is up to the content you'll be placing on the Carousel's child. I've cleaned up some redundancy and separated the Cards into reusable components that will be used as Children. Also, please be mindful to use the theme as mentioned on the Carousel's docs, I don't think we needed the theme for this exercise so I have removed it.

import React from "react";

import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Box,
  Image,
  Heading,
  Carousel,
  Grommet
} from "grommet";

const Card0 = () => (
  <Card pad="large" background="dark-1" gap="medium">
    <CardHeader>
      <Box height="small" width="small">
        <Image src="./images/Photo.jpg" />
      </Box>
    </CardHeader>
    <CardBody>Card0 The Stranahan High School Graduation</CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
);

const Card1 = () => (
  <Card pad="large" background="dark-1" gap="medium">
    <CardHeader>
      <Box height="small" width="small">
        <Image src="./images/Photo.jpg" />
      </Box>
    </CardHeader>
    <CardBody>Card1 The Stranahan High School Graduation</CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
);

const Card2 = () => (
  <Card pad="large" background="dark-1" gap="medium">
    <CardHeader>
      <Box height="small" width="small">
        <Image src="./images/Photo.jpg" />{" "}
      </Box>
    </CardHeader>
    <CardBody>Card2 The Stranahan High School Graduation</CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
);

const Events = () => (
  <Grommet>
    <Heading textAlign="center">Upcoming Events</Heading>
    <Carousel>
      <Box direction="row" pad="large" round gap="small">
        <Card0 />
        <Card1 />
        <Card2 />
      </Box>
      <Box direction="row" pad="large" background="brand" round gap="small">
        <Card2 />
        <Card1 />
        <Card0 />
        <Card2 />
      </Box>
      <Box direction="row" pad="large" background="accent-1" round gap="small">
        <Card2 />
        <Card1 />
        <Card0 />
      </Box>
      <Box direction="row" pad="large" background="accent-2" round gap="small">
        <Card2 />
        <Card1 />
        <Card0 />
        <Card2 />
      </Box>
    </Carousel>
  </Grommet>
);

export default Events;