我怎样才能把它变成一个工作的轮播？轮播弹出但两个箭头未激活

Question

我怎样才能将它变成一个可以在同一个旋转木马旋转时显示 3 张或更多卡片的工作旋转木马？这是我放在一起的示例代码，但在不同的旋转中显示更多的多张牌时遇到了麻烦。我的目标是能够在旋转木马的每个 spring（总共四次旋转中）显示多张卡片。

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

我已经为您修复了示例，每个 Carousel 开关显示的卡片数量取决于您要放置在 Carousel 子项上的内容。我已经清理了一些冗余并将卡片分成可重用的组件，这些组件将用作子组件。另外，请注意使用 Carousel's docs 中提到的主题，我认为我们不需要此练习的主题，因此我已将其删除。

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;

我怎样才能把它变成一个工作的轮播？轮播弹出但两个箭头未激活

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

javascript

carousel

reactjs

grommet