Material UI Carousel 上的多个项目

问题描述

我正在使用以下 Material UI Carousel 库，但无法理解如何为轮播创建多个项目。

我在文档中搜索过，那里没有解决方案，试图通过这样定义宽度来操作 CSS：

  .item{
    margin: 0 auto;
    text-align: center;
    width: 30%;
  }

也没有用。

这是我的代码：

 function Home() {
  var items = [
    {
        name: "Pizza Begin",link: "pizza-begin.co.il",image: Begin
    },{
        name: "Mia Luz",link: "mia-luz.com",image: Mia
    },{
        name: "Nuda Swim",link: "nudaswim.com"
    }
   ];


   return(<>
    <Carousel navButtonsAlwaysInvisible={true} animation="slide" activeIndicatorIconButtonProps={{className: "activeIndicator"}}>
        {
            items.map( (item,i) => <Item key={i} item={item} /> )
        }
    </Carousel>

</>);
}

function Item(props)
{
    return (
        <Paper className="item">
            <img className="imageCarousel" src={props.item.image} alt={props.item.name} />
            <h2 onClick={() => { window.location.href = props.item.link; }}>{props.item.name}</h2>
        </Paper>
    )
}

export default Home;

现在每张幻灯片包含一个项目，我的目标是每张幻灯片上达到 3 个项目。

如何使用 Material UI Carousel 在一张幻灯片中使用多个项目？

Codesandbox

解决方法

沙洛姆！
问题出在 Carousel 组件内部。

我是 Material UI 的新手，但似乎每个数组元素在滑块上都有一个“页面”。

所以我做了什么，它给了我你正在寻找的结果看起来像这样：

    const sliderItems: number = data.length > 3 ? 3 : data.length;
  const items: Array<any> = [];

  for (let i = 0; i < data.length; i += sliderItems) {
    if (i % sliderItems === 0) {
      items.push(
        <Card raised className="Banner" key={i.toString()}>
          <Grid container spacing={0} className="BannerGrid">
            {data.slice(i,i + sliderItems).map((da,index) => {
              return <SubCategory key={index.toString()} item={da} />;
            })}
          </Grid>
        </Card>
      );
    }
  }
  return (
    <Carousel animation="slide" autoPlay={false} cycleNavigation timeout={300}>
      {items}
    </Carousel>
  );
};

我为每个滑块选择了 3 个项目。 items 数组包含卡片数组。